vue项目使用高德图
新版高德推荐使用安全密钥，首先在publit/index.html页面引入高德js。引入之后整个项目就可以使用高德了vuefile使用：container是地图的容器，必须设置宽高if(window.AMap){this.map=newwindow.AMap.Map(document.querySelector('#container'),{//mapStyle:"amap://styles/darkblue",//设置地图容器idviewMode:"3D",//是否为3D地图模式zoom:11,//初始化地图水平中心:[114.300923,30.575807],//初始化地图中心点位置});}}，加载一些地图工具this.map.plugin(["AMap.HawkEye","AMap.MapType","AMap.Scale","AMap.ToolBar","AMap.MouseTool",],()=>{//加载工具栏vartool=newAMap.ToolBar({position:"LT",});this.map.addControl(newAMap.HawkEye());this.map.addControl(newAMap.MapType());this.map.addControl(newAMap.Scale());this.map.addControl（工具）；});于是地图就出来了，带有后期地图开发功能，比如在地图上添加绘图区域点击dom绘制多边形clear
增加点击时间drawPolyline(){this.mouseTool.polyline({strokeColor:"#3366FF",strokeOpacity:1,strokeWeight:6,//线型也支持'虚线'strokeStyle:"solid",//strokeStyle为虚线时有效//strokeDasharray:[10,5],});},drawPolygon(){this.mouseTool.polygon({strokeColor:"#FF33FF",strokeOpacity:1,strokeWeight:6,strokeOpacity:0.2,fillColor:"#1791fc",fillOpacity:0.4,//线条样式也支持'dashed'strokeStyle:"solid",//strokeStyle为虚线时有效//strokeDasharray:[30,10],});},drawRectangle(){this.mouseTool.rectangle({strokeColor:"red",strokeOpacity:0.5,strokeWeight:6,fillColor:"blue",fillOpacity:0.5,//strokeStyle也支持纯色strokeStyle:"solid",//strokeDasharray:[30,10],});},drawCircle(){this.mouseTool.circle({strokeColor:"#FF33FF",strokeOpacity:1,strokeWeight:6,strokeOpacity:0.2,fillColor:"#1791fc",fillOpacity:0.4,strokeStyle:"solid",//线型也支持'dashed'//strokeDasharray:[30,10],});},捕获绘图信息if(window.AMap){this.map=newwindow.AMap.Map(document.querySelector('#container'),{//mapStyle:"amap://styles/darkblue",//设置地图容器idviewMode:"3D",//是否为3D地图模式zoom:11,//初始化地图层级中心:[114.300923,30.575807],//初始化地图中心点位置});this.mouseTool=newAMap.MouseTool(this.map);this.mouseTool.on("draw",function(e){console.log(e);//绘制后捕获的信息集合this.overlays=[];this.overlays.push(e.obj);//this.mouseTool.close();});}关闭绘图drawClose(){this.mouseTool.close(true);//关闭并清除叠加层this.$nextTick(()=>{this.map.remove(this.map.getAllOverlays('polygon'));})},
