关于vue.js: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'));
  })
},