首页 > 其他 > 详细

BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取

时间:2015-10-19 20:52:49      阅读:332      评论:0      收藏:0      [点我收藏+]

1、博文产生原因

在使用百度Map开放API进行开发的时候,遇到了一个需求,很简单的一个需求。
    →用户需要在地图上画一个矩形,根据矩形的边界值查询数据(主要在卫星数据的时空检索上使用)
  没有想到的是,我翻遍了百度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。
      如果有博友有更好的方法,欢迎指正!

转自http://blog.csdn.net/lina791211/article/details/35251957

BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取

原文:http://www.cnblogs.com/xiaoliu66007/p/4892765.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!