最近在做的项目中需要根据百度地图的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)!