摘要：本篇目錄使用入門簡(jiǎn)單使用流程鏈家地圖找房效果區(qū)域點(diǎn)位氣泡數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)方法區(qū)域邊界獲取區(qū)域點(diǎn)位經(jīng)緯度獲取區(qū)域邊界小結(jié)最近由于項(xiàng)目需要，開始調(diào)研如何使用百度地圖實(shí)現(xiàn)類似于鏈家的地圖找房的功能，從而開始學(xué)習(xí)百度地圖相關(guān)內(nèi)容。

本篇目錄：

使用入門

簡(jiǎn)單使用流程

鏈家地圖找房效果

區(qū)域點(diǎn)位氣泡

數(shù)據(jù)結(jié)構(gòu)

實(shí)現(xiàn)

addOverlay方法

區(qū)域邊界

獲取區(qū)域點(diǎn)位經(jīng)緯度

獲取區(qū)域邊界

小結(jié)

最近由于項(xiàng)目需要，開始調(diào)研如何使用百度地圖實(shí)現(xiàn)類似于鏈家的地圖找房的功能，從而開始學(xué)習(xí)百度地圖相關(guān)內(nèi)容。后續(xù)會(huì)根據(jù)一些使用到的知識(shí)點(diǎn)進(jìn)行整理記錄，以備不時(shí)之需吧。

引用百度地圖開放平臺(tái)里面的一個(gè)簡(jiǎn)單流程，需要用戶注冊(cè)百度賬號(hào)并且申請(qǐng)百度地圖的開發(fā)者，之后需要獲取自己的服務(wù)秘鑰（ak），這個(gè)服務(wù)秘鑰在實(shí)際開發(fā)過(guò)程中是需要使用到的。至于開發(fā)者所需要的服務(wù)功能在申請(qǐng)服務(wù)密鑰時(shí)自行選擇，這里不做統(tǒng)一說(shuō)明。

1.申請(qǐng)百度賬號(hào)和ak

2.準(zhǔn)備頁(yè)面
根據(jù)HTML標(biāo)準(zhǔn)，每一份HTML文檔都應(yīng)該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規(guī)范的文檔聲明：

3.適應(yīng)移動(dòng)端頁(yè)面展示
下面我們添加一個(gè)meta標(biāo)簽，以便使您的頁(yè)面更好的在移動(dòng)平臺(tái)上展示。

4.設(shè)置容器樣式
這個(gè)，就根據(jù)自己的需要來(lái)吧~~~

5.引用百度地圖API文件

開頭時(shí)申請(qǐng)的服務(wù)密鑰這會(huì)就有用了。

6.創(chuàng)建地圖容器元素

地圖需要一個(gè)HTML元素作為容器，這樣才能展現(xiàn)到頁(yè)面上。這里我們創(chuàng)建了一個(gè)div元素。

7.創(chuàng)建地圖實(shí)例

var map = new BMap.Map("container"); 

注意：
1.在調(diào)用此構(gòu)造函數(shù)時(shí)應(yīng)確保容器元素已經(jīng)添加到地圖上。
2.命名空間 API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

8.設(shè)置中心點(diǎn)坐標(biāo)

var point = new BMap.Point(116.404, 39.915); 

請(qǐng)注意：在使用百度地圖JavaScript API服務(wù)時(shí)，需使用百度BD09坐標(biāo)，如使用其他坐標(biāo)（ WGS84、GCJ02）進(jìn)行展示，需先將其他坐標(biāo)轉(zhuǎn)換為BD09，詳細(xì)說(shuō)明請(qǐng)參考坐標(biāo)轉(zhuǎn)換說(shuō)明，請(qǐng)勿使用非官方的轉(zhuǎn)換方法！??！

9.地圖初始化，同時(shí)設(shè)置地圖展示級(jí)別

map.centerAndZoom(point, 15);  

在創(chuàng)建地圖實(shí)例后，我們需要對(duì)其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。 地圖必須經(jīng)過(guò)初始化才可以執(zhí)行其他操作。

好的，通過(guò)上面的9個(gè)步驟我們就能簡(jiǎn)單的通過(guò)調(diào)用百度地圖JavaScript API來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的地圖組件了。

以鏈家租房為例，基本效果如下：

通過(guò)上圖可以看出，我們實(shí)現(xiàn)的功能很簡(jiǎn)單，劃分區(qū)域并且將區(qū)域內(nèi)的數(shù)據(jù)以氣泡的形式在地圖上面顯示出來(lái)。

我們需要實(shí)現(xiàn)的內(nèi)容可以分為以下四個(gè)部分：

區(qū)域點(diǎn)位氣泡

區(qū)域邊界

獲取區(qū)域點(diǎn)位經(jīng)緯度

獲取區(qū)域邊界

接下來(lái)我們從上面四個(gè)角度來(lái)逐一分解：

先讓我們來(lái)看一下，對(duì)應(yīng)每一個(gè)區(qū)域氣泡的數(shù)據(jù)格式是怎么樣的。

{
    "id": 23008626,
    "name": "西城",
    "longitude": 116.36960374452,
    "latitude": 39.910041817755,
    "border": "116.33966497518,39.943764592525;116.3411097524,39.928597618389;116.341315,39.904264;116.344854,39.904291;116.344935,39.903046;116.335774,39.90304;116.33580482633,39.899337316133;116.33242753154,39.899040029285;116.33245527539,39.898197950347;116.33283394656,39.895693053733;116.330977,39.895485;116.330926,39.89293;116.330212,39.892899;116.330222,39.891257;116.33024,39.890212;116.327698,39.890115;116.327761,39.88071;116.329557,39.880786;116.331408,39.880675;116.333043,39.880578;116.333869,39.880564;116.334354,39.88062;116.334696,39.880661;116.336259,39.880772;116.337139,39.880869;116.337606,39.880897;116.337929,39.880952;116.338145,39.881256;116.339457,39.881312;116.340858,39.881326;116.34375,39.881464;116.346194,39.881589;116.347631,39.88163;116.34835,39.881547;116.349571,39.881409;116.350578,39.881326;116.351063,39.881243;116.351386,39.881132;116.351278,39.880357;116.351314,39.879582;116.353811,39.879582;116.356363,39.879568;116.35665,39.878294;116.356884,39.877007;116.357369,39.87446;116.40572867625,39.878578727299;116.4047580463,39.892972104486;116.40452597879,39.901901880113;116.40441622959,39.906532832082;116.40257282982,39.906507681183;116.4020196152,39.913804303627;116.39828683227,39.913832594783;116.39725265797,39.928722718426;116.40581966266,39.929770411996;116.40568598304,39.934729286107;116.40295669491,39.934655327476;116.40254832882,39.939804012204;116.40231814784,39.946463810438;116.40155209008,39.94695247551;116.40049657642,39.94705131884;116.4001439975,39.954900233487;116.39984559727,39.963429984507;116.39296272069,39.962975952981;116.39373616852,39.965896570349;116.39437,39.969363;116.398806,39.969503;116.398806,39.974093;116.398806,39.974991;116.399679,39.977101;116.400523,39.979367;116.387534,39.978897;116.389959,39.974502;116.37665910912,39.973917456809;116.37842636561,39.95481641918;116.36316310982,39.949597406824;116.362735,39.952795;116.361208,39.952753;116.360965,39.953521;116.360732,39.955699;116.362744,39.955602;116.36200826406,39.957387484274;116.35838467559,39.956443466213;116.35758831682,39.952823154673;116.35883299579,39.94855433968;116.35352531625,39.94923292836;116.34933548622,39.948951148112;116.34882794641,39.944143030672",
    "count": 1870
}

在上面的數(shù)據(jù)格式中，共有以下幾個(gè)字段值：

id 區(qū)域的id值

name 區(qū)域名稱

longitude 區(qū)域氣泡的中心經(jīng)度值

latitude 區(qū)域氣泡的中心緯度值

border 區(qū)域的邊界關(guān)鍵點(diǎn)的經(jīng)緯度值

count 資源數(shù)量

在說(shuō)道氣泡的時(shí)候就不得不提，百度地圖提供的覆蓋物相關(guān)的API，請(qǐng)看下圖：

可以看出，百度地圖支持不同類型不同功能的覆蓋物功能。然后根據(jù)我們結(jié)果圖的效果來(lái)看，我們選擇使用Label來(lái)實(shí)現(xiàn)。主要是因?yàn)闅馀蒿@示的信息均為文本形式，無(wú)需其他的附加功能；Label的內(nèi)容支持HTML，這樣簡(jiǎn)單地樣式設(shè)置也滿足了。

先來(lái)看一下Label的參數(shù)說(shuō)明：

對(duì)于實(shí)例內(nèi)容，我們可以定義一個(gè)模板來(lái)使用

#{name}
#{count}個(gè)資源

然后讓我們來(lái)創(chuàng)建一個(gè)Label

var Label = new BMap.Label($.replaceTpl(tpl, data), {
    position: new BMap.Point(data.longitude, data.latitude),
    offset: BMap.Size(-46, -46)
})

其中，data是我們上面定義的一個(gè)數(shù)據(jù)結(jié)構(gòu)，tpl是我們定義的模板字符串。replaceTpl是自定義的用來(lái)替換模板字符串中字段值內(nèi)容的工具函數(shù)，實(shí)現(xiàn)方法大家可以自行腦補(bǔ)。

參數(shù)部門，首先根據(jù)數(shù)據(jù)結(jié)構(gòu)中的中心經(jīng)緯度值，獲得Label的地理位置，offset是Label的位置偏移值。這樣通過(guò)上面的方法和我們的數(shù)據(jù)結(jié)構(gòu)就可以獲得一個(gè)Label的氣泡。

然后我們也可以通過(guò)Label提供的方法來(lái)調(diào)整Label。比如

label.setStyle(styleObject)

其他一些方法請(qǐng)參照：

上面創(chuàng)建了一個(gè)Label實(shí)例之后發(fā)現(xiàn)地圖上面并沒(méi)有出現(xiàn)我們預(yù)期的效果，這是因?yàn)槲覀冞€需要使用地圖組件的addOverlay方法將覆蓋物添加到地圖上面

map.addOverlay(label)

在地圖上面區(qū)域的邊界其實(shí)可以理解為在地圖上面的固定區(qū)域描畫一個(gè)多邊形，這樣就可以知道我們需要使用到的是百度地圖中的多邊形功能Polygon。

表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色

var polygon = new BMap.Polygon(borderData, {
    strokeWeight: 2,
    strokeColor: "#4285f4",
    strokeOpacity: 1,
    fillOpacity: .1,
    enableMassClear: !1
});

上面是我們這次中的一個(gè)簡(jiǎn)單的多邊形實(shí)例，其中borderData可以參照上面數(shù)據(jù)結(jié)構(gòu)中的border字段。我們可以來(lái)看一下官方給出的定義

可以看出主要有兩部分參數(shù)構(gòu)成，一部分是多邊形關(guān)鍵點(diǎn)的點(diǎn)位數(shù)組，一部分是設(shè)置參數(shù)，具體參照下圖

當(dāng)然，在創(chuàng)建完一個(gè)多邊形實(shí)例之后不要忘記添加到地圖上面啊

map.addOverlay(polygon)

當(dāng)我們知道了一個(gè)市區(qū)有哪些區(qū)域后，我們?cè)撊绾蝸?lái)獲取對(duì)應(yīng)這個(gè)區(qū)域的一個(gè)點(diǎn)位的經(jīng)緯度呢？我們可以通過(guò)百度地圖提供的BMap.Geocoder來(lái)獲取點(diǎn)位信息

Geocoder：地址解析，提供將地址信息轉(zhuǎn)換為坐標(biāo)點(diǎn)信息的服務(wù)。

地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點(diǎn)信息。

百度地圖API提供Geocoder類進(jìn)行地址解析，您可以通過(guò)Geocoder.getPoint()方法來(lái)將一段地址描述轉(zhuǎn)換為一個(gè)坐標(biāo)。在下面的示例中，我們將獲得地址“北京市海淀區(qū)”的地理坐標(biāo)位置。注意在調(diào)用Geocoder.getPoint()方法時(shí)您需要提供地址解析所在的城市（本例為“北京市”）。

var myGeo = new BMap.Geocoder();      
// 將地址解析結(jié)果顯示在地圖上，并調(diào)整地圖視野    
myGeo.getPoint("北京市海淀區(qū)", function(point){      
  if (point) {      
     // 創(chuàng)建點(diǎn)位標(biāo)識(shí)
     // point {lng, lat} 點(diǎn)位的經(jīng)緯度值
  }      
}, "北京市");

附官方說(shuō)明：

上面我們獲取到了區(qū)域的點(diǎn)位信息，那么我們?cè)趺茨軌颢@取到這個(gè)區(qū)域的邊界信息呢？同樣的，百度地圖提供給了我們API可以來(lái)使用：BMap.Boundary

百度地圖API提供Boundary類進(jìn)行地址解析，您可以通過(guò)Boundary.get()方法來(lái)將一段地址描述轉(zhuǎn)換為一系列邊界關(guān)鍵點(diǎn)的經(jīng)緯度字符串。在下面的示例中，我們將獲得地址“北京市海淀區(qū)”的地理區(qū)域。

var bdary = new BMap.Boundary();

bdary.get("北京市海淀區(qū)", function(rs) { //獲取行政區(qū)域
    console.error(rs);
});

附官方說(shuō)明：

其實(shí)類似于鏈家地圖找房的實(shí)現(xiàn)并沒(méi)有我們想象的那么復(fù)雜，一些關(guān)鍵的實(shí)現(xiàn)百度地圖都給我們提供了可用的接口，雖然有些接口的數(shù)據(jù)會(huì)有一定的出入，但是基本的一些功能的實(shí)現(xiàn)我們是可以通過(guò)使用這些接口來(lái)實(shí)現(xiàn)的。具體Demo請(qǐng)參照。