咱們利用鼠標工具來實現多邊形編輯,引入鼠標工具插件:css
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.PolyEditor"></script>
繪製多邊形,如此繪製2個。您也能夠繪製多個。html
//在地圖上繪製折線 var editor={}; editor._polygon1=(function(){ var arr = [ //構建多邊形經緯度座標數組 [116.403322,39.920255], [116.410703,39.897555], [116.402292,39.892353], [116.389846,39.891365] ] return new AMap.Polygon({ map: map, path: arr }); })();
繪製完畢,打開多邊形可編輯屬性。便可編輯多邊形。web
editor._polygonEditor1= new AMap.PolyEditor(map, editor._polygon1); editor._polygonEditor1.open();
截圖以下:api
所有源代碼:數組
<!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> </head> <body> <div id="container"></div> <script> var editorTool, map = new AMap.Map("container", { resizeEnable: true, center: [116.403322, 39.900255],//地圖中心點 zoom: 13 //地圖顯示的縮放級別 }); //在地圖上繪製折線 var editor={}; editor._polygon1=(function(){ var arr = [ //構建多邊形經緯度座標數組 [116.403322,39.920255], [116.410703,39.897555], [116.402292,39.892353], [116.389846,39.891365] ] return new AMap.Polygon({ map: map, path: arr }); })(); editor._polygon2=(function(){ var arr = [ //構建多邊形經緯度座標數組 [116.403322,39.921255], [116.410703,39.891555], [116.402292,39.891353], [116.389846,39.891365] ] return new AMap.Polygon({ map: map, path: arr }); })(); map.setFitView(); editor._polygonEditor1= new AMap.PolyEditor(map, editor._polygon1); editor._polygonEditor1.open(); editor._polygonEditor2= new AMap.PolyEditor(map, editor._polygon2); editor._polygonEditor2.open(); </script> </body> </html>