地圖覆蓋物概述
所有疊加或覆蓋到地圖的內容，我們統稱為地圖覆蓋物。如標注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標，當您拖動或縮放地圖時，它們會相應的移動。
地圖API提供了如下幾種覆蓋物：
- Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。
- Marker：標注表示地圖上的點，可自定義標注的圖標。
- Label：表示地圖上的文本標注，您可以自定義標注的文本內容。
- Polyline：表示地圖上的折線。
- Polygon：表示地圖上的多邊形。多邊形類似於閉合的折線，另外您也可以為其添加填充顏色。
- Circle: 表示地圖上的圓。
- InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。
一。折線
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);
二。自定義覆蓋物
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"; }
添加覆蓋物
您現在已經完成了一個完整的自定義覆蓋物的編寫，可以添加到地圖上了。
// 初始化地圖 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);
三。添加一個橢圓
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> <title>添加橢圓</title> </head> <body> <div id="allmap"></div> <p>在地圖上添加一個橢圓，圓的顏色為藍色、線寬6px、透明度為1，填充顏色為白色，透明度為0.5</p> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 10); //centre:橢圓中心點,X:橫向經度,Y:縱向緯度 function add_oval(centre,x,y) { var assemble=new Array(); var angle; var dot; var tangent=x/y; for(i=0;i<36;i++) { angle = (2* Math.PI / 36) * i; dot = new BMap.Point(centre.lng+Math.sin(angle)*y*tangent, centre.lat+Math.cos(angle)*y); assemble.push(dot); } return assemble; } var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); map.addOverlay(oval); </script>
效果：
感謝您的閱讀！
基礎知識可看：http://www.cnblogs.com/0201zcr/p/4687220.html 百度地圖事件
http://www.cnblogs.com/0201zcr/p/4680461.html 添加標簽
http://www.cnblogs.com/0201zcr/p/4679444.html 添加地圖服務