vue 项目使用高德地图

新版本的高德建议使用安全key

首先在publit/index.html
页面里面引入高德js，引入后整个项目可以使用高德

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode:'安全秘钥', // 
    }
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=普通key"></script> 

vue 文件中使用:

container 为地图的容器，必须设置宽高

if (window.AMap) {
    this.map = new window.AMap.Map(document.querySelector('#container'), {
      // mapStyle: "amap://styles/darkblue",
      //设置地图容器id
      viewMode: "3D", //是否为3D地图模式
      zoom: 11, //初始化地图级别
      center: [114.300923, 30.575807], //初始化地图中心点位置
    });
  }
},

加载一些地图的工具

this.map.plugin(
  [
    "AMap.HawkEye",
    "AMap.MapType",
    "AMap.Scale",
    "AMap.ToolBar",
    "AMap.MouseTool",
  ],
  () => {
    //加载工具条
    var tool = new AMap.ToolBar({
      position: "LT",
    });
    this.map.addControl(new AMap.HawkEye());
    this.map.addControl(new AMap.MapType());
    this.map.addControl(new AMap.Scale());
    this.map.addControl(tool);
  }
);

这样地图就出来了，有地图后开发功能，比如在地图上画区域

增加点击的dom

<div class="input-card" style="width: 200px">
  <!-- <button class="btn" @click="drawPolyline" style="margin-bottom: 5px">
    绘制线段
  </button> -->
  <button class="btn" @click="drawPolygon" style="margin-bottom: 5px">
    绘制多边形
  </button>
  <!-- <button class="btn" @click="drawRectangle" style="margin-bottom: 5px">
    绘制矩形
  </button> -->
  <!-- <button class="btn" @click="drawCircle" style="margin-bottom: 5px">
    绘制圆形
  </button> -->
  <button class="btn" @click="drawClose" style="margin-bottom: 5px">
    清除
  </button>
</div>

增加点击时间

drawPolyline() {
  this.mouseTool.polyline({
    strokeColor: "#3366FF",
    strokeOpacity: 1,
    strokeWeight: 6,
    // 线样式还支持 'dashed'
    strokeStyle: "solid",
    // strokeStyle是dashed时有效
    // 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是dashed时有效
    // strokeDasharray: [30,10],
  });
},
drawRectangle() {
  this.mouseTool.rectangle({
    strokeColor: "red",
    strokeOpacity: 0.5,
    strokeWeight: 6,
    fillColor: "blue",
    fillOpacity: 0.5,
    // strokeStyle还支持 solid
    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 = new window.AMap.Map(document.querySelector('#container'), {
      // mapStyle: "amap://styles/darkblue",
      //设置地图容器id
      viewMode: "3D", //是否为3D地图模式
      zoom: 11, //初始化地图级别
      center: [114.300923, 30.575807], //初始化地图中心点位置
    });
    this.mouseTool = new AMap.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'));
  })
},