接地图加载后 (4条消息) Vue加载地图的两种方法_程序大白兔的博客-CSDN博客

新增围栏

addArea(){this.drawPolygon();
},
drawPolygon () {var that=this;var mouseTool=new AMap.MouseTool(that.map);mouseTool.polygon({strokeColor: "#FF33FF", //线条颜色，使用16进制颜色代码赋值。默认值为#00D3FCstrokeOpacity: 1,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9strokeWeight: 6,//    轮廓线宽度strokeOpacity: 0.2,//轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9fillColor: '#1791fc',//多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5fillOpacity: 0.4,//多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5// 线样式还支持 'dashed'strokeStyle: "solid",//strokeStyle// strokeStyle是dashed时有效// strokeDasharray: [30,10],})mouseTool.on('draw', function(event) {// event.obj 为绘制出来的覆盖物对象//mouseTool.close(true);//关闭，并清除覆盖物//that.map.clearMap();//删除地图上所有的覆盖物//that.map.remove(event.obj);//移出console.log('覆盖物对象绘制完成坐标点',event.obj.getPath())})},

编辑围栏

 drawPolygonEdit(){var that=this;var path =  [[116.453322, 39.920255],[116.460703, 39.897555],[116.452292, 39.892353],[116.439846, 39.891365]];polygon = new AMap.Polygon({path: path,strokeColor: "#FF33FF",strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,fillColor: '#1791fc',zIndex: 50,bubble: true,});this.map.add([polygon]);// 缩放地图到合适的视野级别this.map.setFitView();var polyEditor;polyEditor = new AMap.PolyEditor(that.map, polygon,path);polyEditor.addAdsorbPolygons(polygon)polyEditor.open();//构建自定义信息窗体var infoWindow = new AMap.InfoWindow({anchor: 'top-left',content: "显示信息",});infoWindow.open(that.map, path[0]=>('地图上围栏的某个点显示信息窗体');},

重绘

clearMap(){this.map.clearMap();this.drawPolygon();},

AMap.MouseTool:鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

polygon:开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制.

具体可看 高德地图 参考手册-地图 JS API v2.0 | 高德地图API (amap.com)