转载：百度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)！
