百度地圖API-覆蓋物

這兩天一直在研究百度地圖開放平臺的各類好玩的東西，閒暇之餘本身動手體驗了一番，果真是妙不可言，並且還能夠自定義理想中的地圖，不得不說，百度地圖的開放平臺爲咱們的應用提供了不少的便利，以前咱們已經學習了地圖的基礎應用和相關的控件的使用，今天，咱們繼續深刻學習，百度地圖API給咱們提供的覆蓋物。

1、地圖覆蓋物概述：

全部疊加或覆蓋到地圖的內容，咱們統稱爲地圖覆蓋物。如標註、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有本身的地理座標，當您拖動或縮放地圖時，它們會相應的移動。

地圖API提供了以下幾種覆蓋物：

• Overlay：覆蓋物的抽象基類，全部的覆蓋物均繼承此類的方法。
• Marker：標註表示地圖上的點，可自定義標註的圖標。
• Label：表示地圖上的文本標註，您能夠自定義標註的文本內容。
• Polyline：表示地圖上的折線。
• Polygon：表示地圖上的多邊形。多邊形相似於閉合的折線，另外您也能夠爲其添加填充顏色。
• Circle: 表示地圖上的圓。
• InfoWindow：信息窗口也是一種特殊的覆蓋物，它能夠展現更爲豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。

可使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。

 

2、標註：

標註表示地圖上的點。API提供了默認圖標樣式，您也能夠經過Icon類來指定自定義圖標。Marker的構造函數的參數爲Point和MarkerOptions（可選）。注意：當您使用自定義圖標時，標註的地理座標點將位於標註所用圖標的中心位置，您可經過Icon的offset屬性修改標定位置。

 

下面的示例向地圖中心點添加了一個標註，並使用默認的標註樣式。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 建立標註    
map.addOverlay(marker);                     // 將標註添加到地圖中

 

 

3、定義標註圖標

經過Icon類可實現自定義標註的圖標，下面示例經過參數MarkerOptions的icon屬性進行設置，您也可使用marker.setIcon()方法。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 編寫自定義函數，建立標註   
function addMarker(point, index){  // 建立圖標對象   
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
// 指定定位位置。   
// 當標註顯示在地圖上時，其所指向的地理位置距離圖標左上    
// 角各偏移10像素和25像素。您能夠看到在本例中該位置便是   
   // 圖標中央下端的尖角位置。    
   offset: new BMap.Size(10, 25),    
   // 設置圖片偏移。   
   // 當您須要從一幅較大的圖片中截取某部分做爲標註圖標時，您   
   // 須要指定大圖的偏移位置，此作法與css sprites技術相似。    
   imageOffset: new BMap.Size(0, 0 - index * 25)   // 設置圖片偏移    
 });      
// 建立標註對象並添加到地圖   
 var marker = new BMap.Marker(point, {icon: myIcon});    
 map.addOverlay(marker);    
}    
// 隨機向地圖添加10個標註    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
 var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                            bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
 addMarker(point, i);    
}

 

4、監聽標註事件

事件方法與Map事件機制相同。可參考事件部分。

marker.addEventListener("click", function(){    
 alert("您點擊了標註");    
});

 

5、可託拽的標註

marker的enableDragging和disableDragging方法可用來開啓和關閉標註的拖拽功能。默認狀況下標註不支持拖拽，您須要調用marker.enableDragging()方法來開啓拖拽功能。在標註開啓拖拽功能後，您能夠監聽標註的dragend事件來捕獲拖拽後標註的最新位置。

marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
 alert("當前位置：" + e.point.lng + ", " + e.point.lat);    
})

 

6、內存釋放

在API 1.0版本中，若是您須要在地圖中反覆添加大量的標註，這可能會佔用較多的內存資源。若是您的標註在移除後再也不使用，可調用Overlay.dispose()方法來釋放內存。注意在1.0版本中，調用此方法後標註將不能再次添加到地圖上。自1.1版本開始，您不在須要使用此方法來釋放內存資源，API會自動幫助您完成此工做。

例如，您能夠在標註被移除後調用此方法：

map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不須要這樣調用

 

7、信息窗口

信息窗口在地圖上方的浮動顯示HTML內容。信息窗口可直接在地圖上的任意位置打開，也能夠在標註對象上打開（此時信息窗口的座標與標註的座標一致）。 您可使用InfoWindow來建立一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處於打開狀態。

var opts = {    
 width : 250,     // 信息窗口寬度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口標題   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 建立信息窗口對象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打開信息窗口

 

8、折線

Polyline表示地圖上的折線覆蓋物。它包含一組點，並將這些點鏈接起來造成折線。

添加折線

折線在地圖上繪製爲一系列直線段。能夠自定義這些線段的顏色、粗細和透明度。顏色能夠是十六進制數字形式（好比：#ff0000）或者是顏色關鍵字（好比：red）。

Polyline的繪製須要瀏覽器支持矢量繪製功能。在Internet Explorer中，地圖使用VML繪製折線；在其餘瀏覽器中使用SVG或者Canvas

如下代碼段會在兩點之間建立6像素寬的藍色折線：

var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920)    
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

 

9、自定義覆蓋物

API自1.1版本起支持用戶自定義覆蓋物。

要建立自定義覆蓋物，您須要作如下工做：

1.定義一個自定義覆蓋物的構造函數，經過構造函數參數能夠傳遞一些自由的變量。

2.設置自定義覆蓋物對象的prototype屬性爲Overlay的實例，以便繼承覆蓋物基類。

3.實現initialize方法，當調用map.addOverlay方法時，API會調用此方法。

4.實現draw方法。

定義構造函數並繼承Overlay

首先您須要定義自定義覆蓋物的構造函數，在下面的示例中咱們定義一個名爲SquareOverlay的構造函數，它包含中心點和邊長兩個參數，用來在地圖上建立一個方形覆蓋物。

// 定義自定義覆蓋物的構造函數  
function SquareOverlay(center, length, color){    
 this._center = center;    
 this._length = length;    
 this._color = color;    
}    
// 繼承API的BMap.Overlay    
SquareOverlay.prototype = new BMap.Overlay();

初始化自定義覆蓋物

當調用map.addOverlay方法添加自定義覆蓋物時，API會調用該對象的initialize方法用來初始化覆蓋物，在初始化過程當中須要建立覆蓋物所須要的DOM元素，並添加到地圖相應的容器中。

地圖提供了若干容器供覆蓋物展現，經過map.getPanes方法能夠獲得這些容器元素，它們包括：

• floatPane
• markerMouseTarget
• floatShadow
• labelPane
• markerPane
• mapPane

這些對象表明了不一樣的覆蓋物容器元素，它們之間存在着覆蓋關係，最上一層爲floatPane，用於顯示信息窗口內容，下面依次爲標註點擊區域層、信息窗口陰影層、文本標註層、標註層和矢量圖形層。

咱們自定義的方形覆蓋物能夠添加到任意圖層上，這裏咱們選擇添加到markerPane上，做爲其一個子結點。

// 實現初始化方法  
SquareOverlay.prototype.initialize = function(map){    
// 保存map對象實例   
 this._map = map;        
 // 建立div元素，做爲自定義覆蓋物的容器   
 var div = document.createElement("div");    
 div.style.position = "absolute";        
 // 能夠根據參數設置元素外觀   
 div.style.width = this._length + "px";    
 div.style.height = this._length + "px";    
 div.style.background = this._color;      
// 將div添加到覆蓋物容器中   
 map.getPanes().markerPane.appendChild(div);      
// 保存div實例   
 this._div = div;      
// 須要將div元素做爲方法的返回值，當調用該覆蓋物的show、   
// hide方法，或者對覆蓋物進行移除時，API都將操做此元素。   
 return div;    
}

繪製覆蓋物

到目前爲止，咱們僅僅把覆蓋物添加到了地圖上，可是並無將它放置在正確的位置上。您須要在draw方法中設置覆蓋物的位置，每當地圖狀態發生變化（好比：位置移動、級別變化）時，API都會調用覆蓋物的draw方法，用於從新計算覆蓋物的位置。經過map.pointToOverlayPixel方法能夠將地理座標轉換到覆蓋物的所須要的像素座標。

// 實現繪製方法   
SquareOverlay.prototype.draw = function(){    
// 根據地理座標轉換爲像素座標，並設置給容器    
 var position = this._map.pointToOverlayPixel(this._center);    
 this._div.style.left = position.x - this._length / 2 + "px";    
 this._div.style.top = position.y - this._length / 2 + "px";    
}

移除覆蓋物

當調用map.removeOverlay或者map.clearOverlays方法時，API會自動將initialize方法返回的DOM元素進行移除。

顯示和隱藏覆蓋物

自定義覆蓋物會自動繼承Overlay的show和hide方法，方法會修改由initialize方法返回的DOM元素的style.display屬性。若是自定義覆蓋物元素較爲複雜，您也能夠本身實現show和hide方法。

// 實現顯示方法    
SquareOverlay.prototype.show = function(){    
 if (this._div){    
   this._div.style.display = "";    
 }    
}      
// 實現隱藏方法  
SquareOverlay.prototype.hide = function(){    
 if (this._div){    
   this._div.style.display = "none";    
 }    
}

自定義其餘方法 經過構造函數的prototype屬性，您能夠添加任何自定義的方法，好比下面這個方法每調用一次就能改變覆蓋物的顯示狀態：

// 添加自定義方法   
SquareOverlay.prototype.toggle = function(){    
 if (this._div){    
   if (this._div.style.display == ""){    
     this.hide();    
   }    
   else {    
     this.show();    
   }    
 }    
}

添加覆蓋物

您如今已經完成了一個完整的自定義覆蓋物的編寫，能夠添加到地圖上了。

// 初始化地圖  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定義覆蓋物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);

 

好啦，關於百度地圖覆蓋物的相關知識咱們已經學習的差很少啦，但學以至用，理論和實踐相結合，勤學勤練纔是提高自身技能的惟一方法，小夥伴們，加油吧！