百度地图API示例：添加删除覆盖物

Posted 2020-11-02 _Iniesta

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   }