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

時間  2019-11-24
標籤 地圖 簡單 實現 简体版
原文   原文鏈接

本篇目錄：javascript

  • 使用入門
    • 簡單使用流程
  • 鏈家地圖找房效果
    • 區域點位氣泡
      • 數據結構
      • 實現
      • addOverlay方法
    • 區域邊界
    • 獲取區域點位經緯度
    • 獲取區域邊界
  • 小結

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

使用入門

圖片描述

引用百度地圖開放平臺裏面的一個簡單流程，須要用戶註冊百度帳號而且申請百度地圖的開發者，以後須要獲取本身的服務祕鑰（ak），這個服務祕鑰在實際開發過程當中是須要使用到的。至於開發者所須要的服務功能在申請服務密鑰時自行選擇，這裏不作統一說明。java

簡單使用流程

  • 1.申請百度帳號和akgit

  • 2.準備頁面 根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，咱們建議您使用最新的符合HTML5規範的文檔聲明：github

    <!DOCTYPE html>
複製代碼

  • 3.適應移動端頁面展現 下面咱們添加一個meta標籤，以便使您的頁面更好的在移動平臺上展現。api

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
複製代碼

  • 4.設置容器樣式 這個，就根據本身的須要來吧~~~數組

  • 5.引用百度地圖API文件bash

    <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座標，如使用其餘座標（ WGS8四、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請參照。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程