首页 > 代码库 > BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取
BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取
雪影工作室版权全部。转载请注明【http://blog.csdn.net/lina791211】
1、博文产生原因
在使用百度Map开放API进行开发的时候,遇到了一个需求,非常easy的一个需求。
→用户须要在地图上画一个矩形,依据矩形的边界值查询数据(主要在卫星数据的时空检索上使用)
没有想到的是,我翻遍了百度Map的百度地图JavaScript API,愣是没有找到相关的操作。在度娘上问了一圈小伙伴,没发现有这个需求的。
真的伤心
2、实现机制
Step1:综合考虑现有需求,针对须要选择空间范围进行检索的小问题,我终于选择使用“鼠标绘制”这一功能,萌萌的Demo点我啦。
上面就是百度提供的萌萌的demo。
Step2:那么就须要进行相关的改造了。百度API中没有提供坐标的相关操作,就须要我们发挥强有力的节操,把这个參数找到。
要相信。既然图能画上去,坐标肯定要标出来。要不然他放大、缩小什么的还能随着自由变化吗?
Step3:查看demo中提供的代码,第134行。
(什么?demo的代码在哪里?-----我才不会告诉你demo界面左下角有一行“源码编辑器”呢)
//回调获得覆盖物信息 var overlaycomplete = function(e){ overlays.push(e.overlay); var result = ""; result = "<p>"; result += e.drawingMode + ":"; if (e.drawingMode == BMAP_DRAWING_MARKER) { result += ‘ 坐标:‘ + e.overlay.getPosition().lng + ‘,‘ + e.overlay.getPosition().lat; if ($(‘isInfowindow‘).checked) { searchInfoWindow.open(e.overlay); } } if (e.drawingMode == BMAP_DRAWING_CIRCLE) { result += ‘ 半径:‘ + e.overlay.getRadius(); result += ‘ 中心点:‘ + e.overlay.getCenter().lng + "," + e.overlay.getCenter().lat; } if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) { result += ‘ 所画的点个数:‘ + e.overlay.getPath().length; } result += "</p>"; $("showOverlayInfo").style.display = "none"; $("panel").innerHTML += result; //将绘制的覆盖物信息结果输出到结果面板 };
看到135行的那行代码了没? var overlaycomplete = function(e)
它传过来一个參数 e 啊。赶紧调出Firebug、F12等奇妙,把那个e捉拿归案。
咦。再看看150行 result += ‘ 所画的点个数:‘ + e.overlay.getPath().length;
有一个奇妙的e.overlay的,那么我们也能够截取他了。果断断点截取。
然后在地图上随便画个图,画完后自己主动断点到e的位置
看到key值为Nk的Object。包括了四个坐标。okay,经过我进一步測试。发现确实是这四个參数。
so!结果得到了。那么这四个參数的依照什么规律呢?细心的博友预计已经看到我露出的部分代码中的解释了吧!!
var olRectPoint = e.overlay.Nk; /* *.Nk是从 e 的dom节点中寻找到的。百度本身没有提供此方法的介绍。* olRectPoint坐标排序方式 * ┌─────────────────────┐ * │0 1 │ * │ │ * │3 2 │ * └─────────────────────┘ * */ var sw = olRectPoint[3]; //左下 var ne = olRectPoint[1]; //右上 console.log(‘左下:‘+ sw.lng+‘,‘ + sw.lat + ‘ 右上:‘+ne.lng+‘,‘+ne.lat);
3、结语
百度Map提供的API还是只是人性化。有些功能藏着掖着,必须让我们慢慢找寻。
以后遇到一些JS API不提供的东西。不是人家不提供,而是你不会找。okay。
假设有博友有更好的方法。欢迎指正!
4、版权
本博文所属:
iteye: http://snowfigure.iteye.com/
CSDN: http://blog.csdn.net/lina791211
所涉及的代码开源。但请在主要位置标注原博文来源地址。
谢谢!
BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取