轉載 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); }