使用高德地圖繪制多邊形區域（轉）
阿新 • • 發佈：2017-10-13
ctype color 點擊 create user ins .com stroke 簡單 
轉自：http://www.cnblogs.com/mengxingxinqing/p/6087201.html
最近遇到一個需求，在網頁上面編輯多邊形的區域，並且需要能夠判斷一個點是否在這個多邊形區域裏面。
看了一下高德地圖的jsapi，簡單的做了一個demo。
1.你需要一個高德地圖的賬號，註冊地址點擊這裏
2.登陸進去創建一個應用，這個時候就會給你一個對應的Key
3.查看高德地圖的的demo，進入示例中心
4.學習一下左側分類裏面的 點標記 的示例，點標記裏有涉及到高德地圖事件，以及基礎的類。
5.看完上面的，接下來我們接著學習折線，多邊形，圓，這裏我們就可以接觸到AMap.Polygon這個類，以及高德地圖提供編輯多邊形的類AMap.PolyEditor
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);
}
上面的代碼裏需要主要的主要是 1.高德地圖清除點標記，支持清除一組，按照數組清除。2.PolyEditor這個多邊形編輯對象，主要使用到了open()和close()兩個函數，以及end事件（當調用了close函數後觸發）3.我按照多邊形的次序，將他們append到html的隱藏域中，並且將id使用了index+次序的方式生成。
然後可以選擇將隱藏域中的內容提交到服務器，或者做其他的處理。
完整demo如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>編輯折線、多邊形、圓</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="http://webapi.amap.com/maps?v=1.3&key=這裏寫上你的key&plugin=AMap.PolyEditor"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> <script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="container"></div> <div class="button-group"> <input type="button" class="button" value="地圖編輯完成" onClick="closeEditPolygon();"/> </div> <script> var editorTool, map = new AMap.Map("container", { resizeEnable: true, center: [116.403322, 39.900255],//地圖中心點 zoom: 13 //地圖顯示的縮放級別 }); var beginNum = 0; var clickListener ; var beginPoints; var beginMarks ; var polygonEditor; var resPolygon = []; var resNum = 0; init(); function init(){ beginPoints = []; beginMarks = []; beginNum = 0; polygonEditor = ‘‘; clickListener = AMap.event.addListener(map, "click", mapOnClick); // var str = ‘[{"J":39.91789947393269,"G":116.36744477221691,"lng":116.367445,"lat":39.917899},{"J":39.91184292800211,"G":116.40658356616223,"lng":116.406584,"lat":39.911843},{"J":39.88616249265181,"G":116.37963272998047,"lng":116.379633,"lat":39.886162}]‘; // var arr = json2arr(str); // createPolygon(arr); } 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){ 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 closeEditPolygon(){ polygonEditor.close(); } function polygonEnd(res){ resPolygon.push(res.target); alert(resPolygon[resNum].contains([116.386328, 39.913818])); appendHideHtml(resNum,res.target.getPath()); resNum++; init(); } 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); } function clearMarks(){ map.remove(beginMarks); } function json2arr(json){ var arr = JSON.parse(json); var res = []; for (var i = 0; i < arr.length; i++) { var line = []; line.push(arr[i].lng); line.push(arr[i].lat); res.push(line); }; return res; } // 實例化點標記 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; } </script> </body> </html>
使用高德地圖繪制多邊形區域（轉）