百度地图api如何添加多个圆形覆盖物？

Posted 2023-05-05

var point = new BMap.Point(104.056699,30.555383);
var Bpoint = new BMap.Point(116.404, 39.915);
var Cpoint = new BMap.Point(116.404, 39.915);
var Dpoint = new BMap.Point(116.404, 39.915);
var Epoint = new BMap.Point(116.404, 39.915);
var Fpoint = new BMap.Point(116.404, 39.915);
var Gpoint = new BMap.Point(116.404, 39.915);
var Hpoint = new BMap.Point(116.404, 39.915);

var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var Bcircle = new BMap.Circle(point,500);
map.addOverlay(circleB); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
showOver();
我试着按照上面的代码添加圆形覆盖物但是始终都只显示第一个，后面的显示不出来。

参考技术A //创建圆对象
var circle = new BMap.Circle(r.point, 50,
strokeColor : "blue",
strokeWeight : 1,
fillColor : "#E2E8F1",
fillOpacity : 0.6
);
//画到地图上面
map.addOverlay(circle);

circle = new BMap.Circle(r.point, 100,
strokeColor : "red",
strokeWeight : 1,
fillColor : "#ccc",
fillOpacity : 0.6
);
//画到地图上面
map.addOverlay(circle);

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

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   }