百度地图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();
    }
  }