仿鏈家地圖找房的簡單實現

07-21

仿鏈家地圖找房的簡單實現

來自專欄冷星前端簿

本篇目錄：

使用入門
簡單使用流程
鏈家地圖找房效果
區域點位氣泡

數據結構
實現
addOverlay方法

區域邊界
獲取區域點位經緯度
獲取區域邊界
小結

最近由於項目需要，開始調研如何使用百度地圖實現類似於鏈家的地圖找房的功能，從而開始學習百度地圖相關內容。後續會根據一些使用到的知識點進行整理記錄，以備不時之需吧。

使用入門

引用百度地圖開放平台裡面的一個簡單流程，需要用戶註冊百度賬號並且申請百度地圖的開發者，之後需要獲取自己的服務秘鑰（ak），這個服務秘鑰在實際開發過程中是需要使用到的。至於開發者所需要的服務功能在申請服務密鑰時自行選擇，這裡不做統一說明。

簡單使用流程

1.申請百度賬號和ak
2.準備頁面
根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規範的文檔聲明：
<!DOCTYPE html>
3.適應移動端頁面展示

下面我們添加一個meta標籤，以便使您的頁面更好的在移動平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4.設置容器樣式
這個，就根據自己的需要來吧~~~
5.引用百度地圖API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> 開頭時申請的服務密鑰這會就有用了。
6.創建地圖容器元素
<div id="container"></div> 地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這裡我們創建了一個div元素。
7.創建地圖實例
var map = new BMap.Map("container");
注意：
1.在調用此構造函數時應確保容器元素已經添加到地圖上。
2.命名空間 API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
8.設置中心點坐標
var point = new BMap.Point(116.404, 39.915);

請注意：在使用百度地圖JavaScript API服務時，需使用百度BD09坐標，如使用其他坐標（ WGS84、GCJ02）進行展示，需先將其他坐標轉換為BD09，詳細說明請參考坐標轉換說明，請勿使用非官方的轉換方法！！！
9.地圖初始化，同時設置地圖展示級別
map.centerAndZoom(point, 15); 在創建地圖實例後，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。地圖必須經過初始化才可以執行其他操作。

好的，通過上面的9個步驟我們就能簡單的通過調用百度地圖JavaScript API來創建一個簡單的地圖組件了。

鏈家地圖找房效果

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

通過上圖可以看出，我們實現的功能很簡單，劃分區域並且將區域內的數據以氣泡的形式在地圖上面顯示出來。

我們需要實現的內容可以分為以下四個部分：

- 區域點位氣泡

- 區域邊界

- 獲取區域點位經緯度

- 獲取區域邊界

接下來我們從上面四個角度來逐一分解：

區域點位氣泡

數據結構

先讓我們來看一下，對應每一個區域氣泡的數據格式是怎麼樣的。

{ "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}

在上面的數據格式中，共有以下幾個欄位值：

id 區域的id值
name 區域名稱
longitude 區域氣泡的中心經度值
latitude 區域氣泡的中心緯度值
border 區域的邊界關鍵點的經緯度值
count 資源數量

實現

在說道氣泡的時候就不得不提，百度地圖提供的覆蓋物相關的API，請看下圖：

可以看出，百度地圖支持不同類型不同功能的覆蓋物功能。然後根據我們結果圖的效果來看，我們選擇使用Label來實現。主要是因為氣泡顯示的信息均為文本形式，無需其他的附加功能；Label的內容支持HTML，這樣簡單地樣式設置也滿足了。

先來看一下Label的參數說明：

對於實例內容，我們可以定義一個模板來使用

<div class="bubble bubble-1" data-xftrack="10144" data-longitude="#{longitude}" data-latitude="#{latitude}" data-id="#{id}"><p class="name" title="#{name}">#{name}</p><p><span class="count">#{count}</span>個資源</p></div>

然後讓我們來創建一個Label

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

其中，data是我們上面定義的一個數據結構，tpl是我們定義的模板字元串。replaceTpl是自定義的用來替換模板字元串中欄位值內容的工具函數，實現方法大家可以自行腦補。

參數部門，首先根據數據結構中的中心經緯度值，獲得Label的地理位置，offset是Label的位置偏移值。這樣通過上面的方法和我們的數據結構就可以獲得一個Label的氣泡。

然後我們也可以通過Label提供的方法來調整Label。比如

label.setStyle(styleObject)

其他一些方法請參照：

addOverlay方法

上面創建了一個Label實例之後發現地圖上面並沒有出現我們預期的效果，這是因為我們還需要使用地圖組件的addOverlay方法將覆蓋物添加到地圖上面

map.addOverlay(label)

區域邊界

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

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

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

上面是我們這次中的一個簡單的多邊形實例，其中borderData可以參照上面數據結構中的border欄位。我們可以來看一下官方給出的定義

可以看出主要有兩部分參數構成，一部分是多邊形關鍵點的點位數組，一部分是設置參數，具體參照下圖

當然，在創建完一個多邊形實例之後不要忘記添加到地圖上面啊

map.addOverlay(polygon)

獲取區域點位經緯度

當我們知道了一個市區有哪些區域後，我們該如何來獲取對應這個區域的一個點位的經緯度呢？我們可以通過百度地圖提供的BMap.Geocoder來獲取點位信息

Geocoder：地址解析，提供將地址信息轉換為坐標點信息的服務。

地理編碼能夠將地址信息轉換為地理坐標點信息。

百度地圖API提供Geocoder類進行地址解析，您可以通過Geocoder.getPoint()方法來將一段地址描述轉換為一個坐標。在下面的示例中，我們將獲得地址「北京市海淀區」的地理坐標位置。注意在調用Geocoder.getPoint()方法時您需要提供地址解析所在的城市（本例為「北京市」）。

var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上，並調整地圖視野 myGeo.getPoint("北京市海淀區", function(point){ if (point) { // 創建點位標識 // point {lng, lat} 點位的經緯度值 } }, "北京市");

附官方說明：

獲取區域邊界

上面我們獲取到了區域的點位信息，那麼我們怎麼能夠獲取到這個區域的邊界信息呢？同樣的，百度地圖提供給了我們API可以來使用：BMap.Boundary

百度地圖API提供Boundary類進行地址解析，您可以通過Boundary.get()方法來將一段地址描述轉換為一系列邊界關鍵點的經緯度字元串。在下面的示例中，我們將獲得地址「北京市海淀區」的地理區域。

var bdary = new BMap.Boundary();bdary.get("北京市海淀區", function(rs) { //獲取行政區域 console.error(rs);});

附官方說明：

小結

其實類似於鏈家地圖找房的實現並沒有我們想像的那麼複雜，一些關鍵的實現百度地圖都給我們提供了可用的介面，雖然有些介面的數據會有一定的出入，但是基本的一些功能的實現我們是可以通過使用這些介面來實現的。後續會整理一個完整的Demo進行分享。