转载：百度API测距到测面的完美逆袭

最近在做的项目中需要根据百度地图的API封装百度地图，就在快要发布版本的时候遇到一个相当棘手的问题，即百度地图API提供的绘制多边形的接口不兼容IE9，使得封装后的测面功能无法在IE9中正常使用，而项目的主推浏览器就是IE9，与项目经理沟通后，项目经理说暂时不予处理，因为属于API的问题，当时我表示可以试一试更改百度API的源代码，经过苦思冥想我如愿找到了解决办法，使得在IE9下完美的完成了测面功能！思路很简单，代码也不麻烦。拿来和大家分享下！

主要思想：

完成这个功能的前提是你对百度地图的API很熟悉，尤其是测距功能。此功能我主要是在测距将结束时双击地图触发的操作（distDblclick）中完成的。

1、 利用鼠标测距的时候会把所有在地图上点击的点都记录下来，将这些点存下来到一个数组points中；

首先你要创建一个数组：var points = [];//存储折线经过的所有点数据

然后将绘制折线所经过的点存储下来（这个过程在测距过程中，点击地图时，触发的操作distClick中完成）：points = me._points;//放所有折线点

2、 利用这些点的数组points创建一个百度的polygon对象。

Var newPolygon =

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

在new 百度polygon的时候的参数可以是多边形对象也可以是构成该多边形的点数组。

recPolygon = newPolygon ;这一步主要是在清除测面时用到，这之前得设置一个对象 recPolygon 保存新建的多边形：var recPolygon = null;

3、 然后把创建的多边形添加到地图上，并调用GeoUtils计算多边形的面积。

me._map.addOverlay(newPolygon);

var resultArea = BMapLib.GeoUtils.getPolygonArea(newPolygon);//计算多边形的面积（单位米）

4、 给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");

});

5、 创建跟随鼠标的多边形标签，显示多边形的面积。

//创建多边形标签

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"});

6、 初始化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
}

}

7、想要清除改多边形，调用map的removeOverlay(recPolygon)方法，里面的参数是多边形对象即可。这一步主要是在点击测距完成后左上方的关闭按钮（点击关闭按钮，绑定关闭按钮事件）中完成。到这里，功能已经实现了。当然，还有其他的实现方法，有兴趣的可以摸索！效果如下图所示：

 

    

 

这里要注意下：就是在清除绘制的多边形时，原来测距只是清除了点和线数据，而我们现在是根据点又创建了一个Polygon对象，所以在清除的时候，必须要再对Polygon对象进行清除一次，同时，要明确这个recPolygon只是作为了保存每次新创建的Polygon对象，为了不出现绘制多个多边形时，删除出现不一致的bug，这里需要

在“处理最后一次操作，当用户双击或测距被强行退出时调用”的方法_processLastOp中将每次创建的Polygon对象保存在定义的disObj对象中（该对象保存本次测面对象）,具体为：disObj.recPolygon = recPolygon;即可。所以在调用map的removeOverlay(recPolygon)方法，里面的参数是多边形对象时，对应写为removeOverlay(disObj.recPolygon)！

转载于:https://www.cnblogs.com/Jhon-xu/p/8708755.html