BaiduMap 滑鼠繪制矩形選框四個頂角坐标的擷取

一、博文産生原因

　　在使用百度Map開放API進行開發的時候，遇到了一個需求，很簡單的一個需求。

　　　　→使用者需要在地圖上畫一個矩形，根據矩形的邊界值查詢資料（主要在衛星資料的時空檢索上使用）

　　沒有想到的是，我翻遍了百度Map的百度地圖JavaScript API，愣是沒有找到相關的操作。在度娘上問了一圈小夥伴，沒發現有這個需求的。真的傷心

二、實作機制

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

 三、結語

    　　百度Map提供的API還是不過人性化。有些功能藏着掖着，必須讓我們慢慢找尋。以後遇到一些JS API不提供的東西，不是人家不提供，而是你不會找。okay。

    　　如果有博友有更好的方法，歡迎指正！

四、版權

    　　本博文所屬：

    　　    　　iteye：http://snowfigure.iteye.com/  和 CSDN http://blog.csdn.net/lina791211

    　　所涉及的代碼開源，但請在主要位置标注原博文來源位址。謝謝！