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

冷星1024發表於2018-08-02
地圖

本篇目錄：

  • 使用入門
    • 簡單使用流程
  • 鏈家地圖找房效果
    • 區域點位氣泡
      • 資料結構
      • 實現
      • 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請參照。

相關文章