1、index.html

2、vue组件，HTML部分

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();    }  }