概述

定制個性地圖是支持用戶使用JavaScript API設置地圖底圖的樣式風格（展現(xiàn)顏色為普通、深色、淺色）以及控制組成地圖底圖的元素類的顯示和隱藏，創(chuàng)建滿足用戶特定需求的與眾不同的地圖，如通過隱藏某類地圖元素，突出展示自己的數(shù)據(jù)。個性化定制功能同時適用于pc端和手機端全部瀏覽器。

目前有兩種方式可以定制個性地圖：

1. 通過百度地圖提供的樣式模板，選擇地圖，然后通過JavaScriptAPI的setMapStyle方法調用生效；

2. 通過個性地圖編輯工具，自行編輯地圖展示樣式，生成地圖樣式json，然后通過JavaScriptAPI的方法調用生效。

以下是深夜版地圖效果：

實現(xiàn)定制個性地圖

模板選擇方式

選擇模板方式簡單好用，對于初學者可選用這種方式，使用步驟如下：

第一步：選擇模板：

目前開放平臺為用戶提供多種不同風格的模板，點擊下方模板示意圖即可進入模板頁面查看模板，開發(fā)者可以從中選擇感興趣的模板進行開發(fā)。

模板示意圖如下：

第二步：設置地圖樣式：

將style改為模板下方的英文名稱，如下圖所示紅框所示：

var mapStyle={  style : "*模板英文名稱*" }  map.setMapStyle(mapStyle);

其中，mapStyle為MapStyle類，該類使用對象字面量形式表示，不可實例化。style用于設置底圖顏色樣式。

下面為風格為mapbox的設置方法：

設置代碼如下：

var mapStyle={  style : "mapbox" }  map.setMapStyle(mapStyle);

設置后地圖效果如下：

個性化編輯方式

該方式是指開發(fā)者可以借助個性化編輯器，通過改變地圖元素的顏色、亮度、飽和度、文本標注填充色、文本標注等生成樣式配置json，然后通過調用JavaScriptAPI方法使配置生效。操作頁面截圖如下：

個性化編輯工具的使用步驟如下：

第一步：添加樣式規(guī)則：

樣式規(guī)則是對元素、屬性及樣式的統(tǒng)一描述，地圖樣式由多條樣式規(guī)則組合而成，編輯首個元素時默認有一條規(guī)則，用戶可以基于修改地圖樣式，后續(xù)編輯元素時，需要重新創(chuàng)建一條規(guī)則。

第二步：選擇元素

創(chuàng)建完樣式規(guī)則后，需要選擇要修改的地圖元素。目前可以修改的地圖元素包括如下幾種：

其中，地圖背景主要包括地圖里的面狀元素，如陸地、水系、綠地、人造區(qū)域，高級別下的建筑物等；

道路區(qū)分為高速及國道、城市主路、一般道路、地鐵及火車線路；

興趣點指地圖里的點狀元素，如銀行，學校，餐館、酒店等，由文本標注和圖標組成。

行政區(qū)劃包括國界、省界及省、市、縣、區(qū)等行政單位的標注。

第三步：選擇屬性

諸如道路這類元素由文本和線狀元素組成，屬性用來指定是修改文本還是線的邊框、填充色，如下圖指定修改道路的邊框：

第四步：選擇樣式

選定屬性后，下一步是選擇要修改的樣式，如要設置道路邊框的顏色為紅色，則按如下操作：

預覽效果如下：

第五步：設置地圖樣式

要將編輯后的地圖樣式應用到自己的網(wǎng)站上，需要先從查看json處（下圖）獲取樣式json，

設置代碼如下：

var myStyleJson=[  {  
    "featureType": "road",  
    "elementType": "geometry.stroke",  
    "stylers": {  
        "color": "#ff0000"  
    }  }];map.setMapStyle({styleJson: myStyleJson });

個性地圖成功案例

以下為百度旅游預測使用的底圖，該地圖僅顯示行政邊界無poi，且整體呈暗色，使得地圖上預測信息的展示更為明顯。