本篇目次：
運用入門
- 簡樸運用流程
鏈家輿圖找房效果
地區點位氣泡
- 數據結構
- 完成
- 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請參照。
