百度地圖API示例：使用vue添加刪除覆蓋物

1、index.html

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>

2、vue組件，HTML部分

<template>
  <div class="firePower">
    <div id="firePowerMap"></div>
    <div>
      <button @click="insertShroud">添加</button>
      <button @click="deleteAll">刪除全部</button>
      <button @click="deletePolyline">刪除折線</button>
      <button @click="deleteCircle">刪除圓</button>
    </div>
  </div>
</template>

3、vue組件，JS部分

 

  export default {
    data() {
      return {}
    },
    methods: {
      _getMapData() {
        let map = new BMap.Map("firePowerMap");  // 創建Map實例
        let point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        map.setCurrentCity("北京"); // 地圖顯示的城市
        map.enableScrollWheelZoom(true);  //開啟鼠標滾輪縮放
        window.map = map;//將map變量存儲在全局
      },
      insertShroud() {
        var polyline = new BMap.Polyline([
          new BMap.Point(116.399, 39.910),//定義折線第一個點
          new BMap.Point(116.405, 39.920),//定義折線第二個點
          new BMap.Point(116.425, 39.900),//定義折線第三個點
          new BMap.Point(116.430, 39.918)//定義折線第四個點
        ], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1});   //創建折線
        //參數：顏色，線的寬度，線的透明度
        map.addOverlay(polyline);
        window.polyline = polyline;//將折線儲存在全局
        var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 創建點
        map.addOverlay(marker);

        var point = new BMap.Point(116.404, 39.915);
        var circle = new BMap.Circle(point, 100, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //創建圓
        map.addOverlay(circle);
        window.circle = circle;//將圓儲存在全局
        var polygon = new BMap.Polygon([
          new BMap.Point(116.387112, 39.920977),//定義多邊形第一個點
          new BMap.Point(116.385243, 39.913063),//定義多邊形第二個點
          new BMap.Point(116.394226, 39.917988),//定義多邊形第三個點
          new BMap.Point(116.401772, 39.921364),//定義多邊形第四個點
          new BMap.Point(116.412482, 39.927893),//定義多邊形第五個點
        ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});  //創建多邊形
        map.addOverlay(polygon);

      },
      deleteAll() {
        map.clearOverlays();//刪除全部
      },
      deletePolyline() {
        polyline.clearOverlays();//刪除折線
      },
      deleteCircle() {
        circle.clearOverlays();//刪除圓
      },
    },
    mounted() {
      this._getMapData();
    }
  }