轉載：百度API測距到測面的完美逆襲

最近在作的項目中須要根據百度地圖的API封裝百度地圖，就在快要發佈版本的時候遇到一個至關棘手的問題，即百度地圖API提供的繪製多邊形的接口不兼容IE9，使得封裝後的測面功能沒法在IE9中正常使用，而項目的主推瀏覽器就是IE9，與項目經理溝通後，項目經理說暫時不予處理，由於屬於API的問題，當時我表示能夠試一試更改百度API的源代碼，通過苦思冥想我如願找到了解決辦法，使得在IE9下完美的完成了測面功能！思路很簡單，代碼也不麻煩。拿來和你們分享下！

主要思想：

完成這個功能的前提是你對百度地圖的API很熟悉，尤爲是測距功能。此功能我主要是在測距將結束時雙擊地圖觸發的操做（distDblclick）中完成的。

一、 利用鼠標測距的時候會把全部在地圖上點擊的點都記錄下來，將這些點存下來到一個數組points中；

首先你要建立一個數組：var points = [];//存儲折線通過的全部點數據

而後將繪製折線所通過的點存儲下來（這個過程在測距過程當中，點擊地圖時，觸發的操做distClick中完成）：points = me._points;//放全部折線點

二、 利用這些點的數組points建立一個百度的polygon對象。

Var newPolygon =

new BMap.Polygon(points,{strokeColor:"blue",strokeWeight:1.5,strokeOpacity:0.8});

在new 百度polygon的時候的參數能夠是多邊形對象也能夠是構成該多邊形的點數組。

recPolygon = newPolygon ;這一步主要是在清除測面時用到，這以前得設置一個對象 recPolygon 保存新建的多邊形：var recPolygon = null;

三、 而後把建立的多邊形添加到地圖上，並調用GeoUtils計算多邊形的面積。

me._map.addOverlay(newPolygon);

var resultArea = BMapLib.GeoUtils.getPolygonArea(newPolygon);//計算多邊形的面積（單位米）

四、 給newPolygon綁定一些事件。

//當鼠標進入多邊形區域時會觸發

newPolygon.addEventListener("mouseover",function(){

           newPolygon.setStrokeColor("red");

         me._map.addOverlay(polygonLabel);//顯示面積

});

//給多邊形添加鼠標"移動"事件

newPolygon.addEventListener("mousemove",function(event){

         polygonLabel.setPosition(event.point);

});

//鼠標離開多邊形時觸發此事件

newPolygon.addEventListener("mouseout",function(){

            newPolygon.setStrokeColor("blue");

         me._map.removeOverlay(polygonLabel);

});

//點擊多邊形後會觸發此事件

newPolygon.addEventListener("click",function(){

           me._map.zoomIn();

           newPolygon.setStrokeColor("red");

});

五、 建立跟隨鼠標的多邊形標籤，顯示多邊形的面積。

//建立多邊形標籤

var polygonLabel = new BMap.Label("<b>此多邊形面積(㎡):</b>"+resultArea,{offset: new BMap.Size(10,-10)});

polygonLabel.setStyle({"z-index":"1000000","padding":"10px","width":"","border":"1px solid #ccff00"});

六、 初始化points數組，以備下一次畫多邊形用。

points = [];

 

開啓方法仍然和測距的是同樣的，

var ltControls = new BMapLib. DistanceTool (this.map,{//實例化鼠標繪製工具
isOpen: false, //是否開啓繪製模式
enableCalculate:true,//開啓測面模式
polygonOptions: defaultOptions.PolygonStyle //多邊形的樣式

});

currentControl.open();

 

var defaultOptions={

PolygonStyle:{
strokeColor:"red", //邊線顏色
fillColor:"#FAFFF0", //填充顏色,當參數爲空時，圓形將沒有填充效果
strokeWeight:1, //邊線的寬度,以像素爲單位
strokeOpacity:1, //邊線透明度,取值範圍0 - 1
fillOpacity:0.6, //填充的透明度,取值範圍0 - 1
strokeStyle:'solid' //邊線的樣式,solid或dashed
}

}

七、想要清除改多邊形，調用map的removeOverlay(recPolygon)方法，裏面的參數是多邊形對象便可。這一步主要是在點擊測距完成後左上方的關閉按鈕（點擊關閉按鈕，綁定關閉按鈕事件）中完成。到這裏，功能已經實現了。固然，還有其餘的實現方法，有興趣的能夠摸索！效果以下圖所示：

 

    

 

這裏要注意下：就是在清除繪製的多邊形時，原來測距只是清除了點和線數據，而咱們如今是根據點又建立了一個Polygon對象，因此在清除的時候，必需要再對Polygon對象進行清除一次，同時，要明確這個recPolygon只是做爲了保存每次新建立的Polygon對象，爲了避免出現繪製多個多邊形時，刪除出現不一致的bug，這裏須要

在「處理最後一次操做，當用戶雙擊或測距被強行退出時調用」的方法_processLastOp中將每次建立的Polygon對象保存在定義的disObj對象中（該對象保存本次測面對象）,具體爲：disObj.recPolygon = recPolygon;便可。因此在調用map的removeOverlay(recPolygon)方法，裏面的參數是多邊形對象時，對應寫爲removeOverlay(disObj.recPolygon)！