仿链家地图找房的简单实现
-
使用入門
- 簡單使用流程
-
鏈家地圖找房效果
-
區域點位氣泡
- 數據結構
- 實現
- addOverlay方法
- 區域邊界
- 獲取區域點位經緯度
- 獲取區域邊界
-
- 小結
使用入門
引用百度地圖開放平臺里面的一個簡單流程，需要用戶注冊百度賬號并且申請百度地圖的開發者，之后需要獲取自己的服務秘鑰（ak），這個服務秘鑰在實際開發過程中是需要使用到的。至于開發者所需要的服務功能在申請服務密鑰時自行選擇，這里不做統一說明。
簡單使用流程
- 1.申請百度賬號和ak
-
2.準備頁面
<!DOCTYPE html>
根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規范的文檔聲明： -
3.適應移動端頁面展示
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
下面我們添加一個meta標簽，以便使您的頁面更好的在移動平臺上展示。 - 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請參照。
總結
以上是生活随笔為你收集整理的仿链家地图找房的简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上海外滩附近一日游
- 下一篇： 正则表达式： 以英文字母开头，只能包含英