构建高德地图
var map = new AMap.Map('container', { center: [121.548181, 29.806906], zoom: 15 });
多边形展示
var path = [ [121.546266, 29.80975], [121.54543, 29.806845], [121.548713, 29.806752], [121.549957, 29.809508] ] var polygon = new AMap.Polygon({ path: path, strokeColor: "#1E9FFF", strokeWeight: 2, strokeStyle: 'dashed', strokeOpacity: 1, fillOpacity: 0.1, fillColor: '#1E9FFF', zIndex: 50, }) map.add(polygon) // 缩放地图到合适的视野级别 map.setFitView([polygon])
多边形绘制辅助工具
引入外部API
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5c66**&plugin=AMap.MouseTool"></script>
var map = new AMap.Map('container', { zoom: 14 }); var mouseTool = new AMap.MouseTool(map); //监听draw事件可获取画好的覆盖物 var overlays = []; mouseTool.on('draw', function (e) { //绘制多边形; overlays.push(e.obj); //获取坐标; console.log(e.obj.getPath()); //格式化坐标; var polyPoints = e.obj.getPath(); var arr = ""; for (var i = 0; i < polyPoints.length; i++) { arr += polyPoints[i].lng + "," + polyPoints[i].lat + ";"; } console.log(arr);//121.540994,29.870174;121.55138,29.858116;121.55756,29.874193; }) //多边形样式; mouseTool.polygon({ strokeColor: "#1E9FFF", strokeWeight: 2, strokeStyle: 'dashed', strokeOpacity: 1, fillOpacity: 0.1, fillColor: '#1E9FFF', zIndex: 50, }); //清除覆盖物; var radios = document.getElementsByName('func'); document.getElementById('clear').onclick = function () { map.remove(overlays) overlays = []; }
lockdatav Done!
