使用高德地圖繪製多邊形區域 (轉)

轉載 http://www.javashuo.com/article/p-rmarsrbz-gg.html 謝謝javascript

最近遇到一個需求,在網頁上面編輯多邊形的區域,而且須要可以判斷一個點是否在這個多邊形區域裏面。html

看了一下高德地圖的jsapi,簡單的作了一個demo。java

1.你須要一個高德地圖的帳號,註冊地址點擊這裏web

2.登錄進去建立一個應用,這個時候就會給你一個對應的Keyapi

3.查看高德地圖的的demo,進入示例中心數組

4.學習一下左側分類裏面的 點標記 的示例,點標記裏有涉及到高德地圖事件,以及基礎的類。app

5.看完上面的,接下來咱們接着學習折線,多邊形,圓,這裏咱們就能夠接觸到AMap.Polygon這個類,以及高德地圖提供編輯多邊形的類AMap.PolyEditoride

6.下面咱們就要開始將上面的功能組合起來,進行高德地圖多邊形的編輯了函數

    6.1 首先,我先用點標記在地圖上選中3個點,組成一個最基本的多邊形(三角形)學習

 

複製代碼
//用來存儲3個基本點的數組 第一個存點座標 第二個存Marker(點標記)對象
var beginPoints;
var beginMarks ;
//地圖上面的click事件對象
var clickListener ;
//當前繪製的點個數,用來控制前面3個點
var beginNum;
//初始化
function init(){
        beginPoints = [];
        beginMarks = [];
        beginNum = 0;
        clickListener = AMap.event.addListener(map, "click", mapOnClick);
    }
init();
//地圖上面綁定的點擊事件
function mapOnClick(e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        beginMarks.push(addMarker(e.lnglat));
        beginPoints.push(e.lnglat);
        beginNum++;
        if(beginNum == 3){
            //處理有了3個點之後,轉化爲多邊形的邏輯
        }
    };

// 實例化點標記
function addMarker(lnglat) {
        
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }
複製代碼

       在上面的代碼裏須要說一點的是,高德地圖的事件綁定跟java的事件綁定有些相似 clickListener = AMap.event.addListener(map, "click", mapOnClick);

         其中第一個參數是要綁定事件的對象,第二個參數是事件類型,第三個參數是對應是事件函數。取消綁定事件的方法AMap.event.removeListener(clickListener);

    6.2 繪製好3個點以後,構建多邊形對象,綁定對應的多邊形編輯對象

複製代碼
//在上面的留空處,處理有了3個點之後的邏輯,繼續開始
AMap.event.removeListener(clickListener);
var polygon = createPolygon(beginPoints);
polygonEditor = createEditor(polygon);
clearMarks();
//處理結束

//上面用到的幾個函數
//建立一個多邊形對象
function createPolygon(arr){
        var polygon = new AMap.Polygon({
            map: map,
            path: arr,
            strokeColor: "#0000ff",
            strokeOpacity: 1,
            strokeWeight: 3,
            fillColor: "#f5deb3",
            fillOpacity: 0.35
        });
        return polygon;
    }
//建立一個多邊形對象的編輯類對象
function createEditor(polygon){
        var polygonEditor = new AMap.PolyEditor(map, polygon);
        polygonEditor.open();
        AMap.event.addListener(polygonEditor,'end',polygonEnd);
        return polygonEditor;
    }
//編輯結束事件
function polygonEnd(res){
        resPolygon.push(res.target);
        alert(resPolygon[resNum].contains([116.386328, 39.913818]));
        appendHideHtml(resNum,res.target.getPath());
        
        resNum++;
        init();
    }
//將多邊形路徑保存到html隱藏域裏
function appendHideHtml(index,arr){
        var strify = JSON.stringify(arr);
        var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
        $('body').append(html);
        console.log(html);
    }

//清除前面的3個點標記
function clearMarks(){
        map.remove(beginMarks);
}
相關文章
相關標籤/搜索