概述

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

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

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

2. 通過(guò)個(gè)性地圖編輯工具，自行編輯地圖展示樣式，生成地圖樣式j(luò)son，然后通過(guò)JavaScriptAPI的方法調(diào)用生效。

以下是深夜版地圖效果：

實(shí)現(xiàn)定制個(gè)性地圖

模板選擇方式

選擇模板方式簡(jiǎn)單好用，對(duì)于初學(xué)者可選用這種方式，使用步驟如下：

第一步：選擇模板：

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

模板示意圖如下：

第二步：設(shè)置地圖樣式：

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

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

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

下面為風(fēng)格為mapbox的設(shè)置方法：

設(shè)置代碼如下：

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

設(shè)置后地圖效果如下：

個(gè)性化編輯方式

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

個(gè)性化編輯工具的使用步驟如下：

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

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

第二步：選擇元素

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

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

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

興趣點(diǎn)指地圖里的點(diǎn)狀元素，如銀行，學(xué)校，餐館、酒店等，由文本標(biāo)注和圖標(biāo)組成。

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

第三步：選擇屬性

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

第四步：選擇樣式

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

預(yù)覽效果如下：

第五步：設(shè)置地圖樣式

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

設(shè)置代碼如下：

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

個(gè)性地圖成功案例

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