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部分

 1   export default {
 2     data() {
 3       return {}
 4     },
 
 5     methods: {
 6       _getMapData() {
 7         let map = new BMap.Map("firePowerMap");  // 創建Map實例
 8         let point = new BMap.Point(116.404, 39.915);
 9         map.centerAndZoom(point, 15);
10         map.setCurrentCity("北京"); // 地圖顯示的城市
11         map.enableScrollWheelZoom(true);  //開啟鼠標滾輪縮放
12
 
         window.map = map;//將map變量存儲在全局
13       },
14       insertShroud() {
15         var polyline = new BMap.Polyline([
16           new BMap.Point(116.399, 39.910),//定義折線第一個點
17           new BMap.Point(116.405, 39.920),//定義折線第二個點
18           new BMap.Point(116.425, 39.900),//定義折線第三個點
19           new BMap.Point(116.430, 39.918)//定義折線第四個點
20         ], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1});   //創建折線
21         //參數：顏色，線的寬度，線的透明度
22         map.addOverlay(polyline);
23         var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 創建點
24         map.addOverlay(marker);
25         var point = new BMap.Point(116.404, 39.915);
26         var circle = new BMap.Circle(point,100,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創建圓
27         map.addOverlay(circle);
28         var polygon = new BMap.Polygon([
29           new BMap.Point(116.387112,39.920977),//定義多邊形第一個點
30           new BMap.Point(116.385243,39.913063),//定義多邊形第二個點
31           new BMap.Point(116.394226,39.917988),//定義多邊形第三個點
32           new BMap.Point(116.401772,39.921364),//定義多邊形第四個點
33           new BMap.Point(116.412482,39.927893),//定義多邊形第五個點
34         ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //創建多邊形
35         map.addOverlay(polygon);
36       },
37       deleteAll() {
38         map.clearOverlays();//刪除全部
39       },
40       deletePolyline(){
41         //刪除折線
42       },
43       deleteCircle(){
44         //刪除圓
45       },
46     },
47     mounted() {
48       this._getMapData();
49     }
50   }

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