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

最新推荐文章于 2023-04-27 15:01:33 发布

南华

最新推荐文章于 2023-04-27 15:01:33 发布

阅读量1.5k

点赞数

分类专栏：地图API 文章标签： BaiduMap 鼠标绘制矩形选框四个顶

本文链接：https://blog.csdn.net/hewusheng10/article/details/40580897

版权

地图API 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

分类： BaiduMap 2014-06-27 13:39 529人阅读评论(3) 收藏举报

BaiduMap 鼠标绘制矩形选框四角坐标

目录(?)[+]

1、博文产生原因

在使用百度Map开放API进行开发的时候，遇到了一个需求，很简单的一个需求。
　　　　→用户需要在地图上画一个矩形，根据矩形的边界值查询数据（主要在卫星数据的时空检索上使用）
　　没有想到的是，我翻遍了百度Map的百度地图JavaScript API，愣是没有找到相关的操作。在度娘上问了一圈小伙伴，没发现有这个需求的。真的伤心

2、实现机制

Step1：综合考虑现有需求，针对需要选择空间范围进行检索的小问题，我最终选择使用“鼠标绘制”这一功能，萌萌的Demo点我啦。

　　上面就是百度提供的萌萌的demo。

　　Step2：那么就需要进行相关的改造了。百度API中没有提供坐标的相关操作，就需要我们发挥强有力的节操，把这个参数找到。

　　　　　　要相信，既然图能画上去，坐标肯定要标出来，要不然他放大、缩小什么的还能随着自由变化吗？

　　Step3：查看demo中提供的代码，第134行。（什么？demo的代码在哪里？-----我才不会告诉你demo界面左下角有一行“源代码编辑器”呢）

[javascript] view plain copy print ?

//回调获得覆盖物信息
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; //将绘制的覆盖物信息结果输出到结果面板
};

    //回调获得覆盖物信息
    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！结果得到了。那么这四个参数的按照什么规律呢？细心的博友估计已经看到我露出的部分代码中的解释了吧！！

[javascript] view plain copy print ?

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

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