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

时间：2021-05-24 07:12:46

雪影工作室版权全部。转载请注明【http://blog.csdn.net/lina791211】

1、博文产生原因

在使用百度Map开放API进行开发的时候，遇到了一个需求，非常easy的一个需求。

　　　　→用户须要在地图上画一个矩形，依据矩形的边界值查询数据（主要在卫星数据的时空检索上使用）

　　没有想到的是，我翻遍了百度Map的百度地图JavaScript API，愣是没有找到相关的操作。在度娘上问了一圈小伙伴，没发现有这个需求的。

真的伤心

2、实现机制

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

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

　　上面就是百度提供的萌萌的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的，那么我们也能够截取他了。果断断点截取。

　　

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

　　然后在地图上随便画个图，画完后自己主动断点到e的位置

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

　　看到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

    　　所涉及的代码开源。但请在主要位置标注原博文来源地址。

谢谢！

相关文章