百度地图，自定义覆盖物为什么清除不了？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2629 天前的主题，其中的信息可能已经有所发展或是发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">  
    html {
      height:100%
    }  
    body {
      height:100%;
      margin:0px;
      padding:0px
    }  
    #main {
      height:100%
    }
    .circle-marker {
      position: absolute;
      width: 90px;
      height: 90px;
      background: #c00;
      border-radius: 50%;
      opacity: .7
    }
  </style>  
  <script src="http://api.map.baidu.com/api?v=2.0&ak=Ls1zIpQI8SB8bi46cSGieAYLHYeyHzfW"></script>
</head>
<body>
  <div id="main"></div>
  <script>
      var map = new BMap.Map("main", {enableMapClick: false});          // 创建地图实例
      var point = new BMap.Point(116.400551, 39.893524);  // 创建点坐标
      map.centerAndZoom(point, 12);                 // 初始化地图，设置中心点坐标和地图级别

      map.enableScrollWheelZoom()
      map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}))
      // 圆形覆盖物
      function customOverlay(point) {
        this.point = point
      }
      customOverlay.prototype = new BMap.Overlay()
      // 初始化，设置覆盖物形状
      customOverlay.prototype.initialize = function() {
        var div = this.div = document.createElement('div')
        div.className = 'circle-marker'
        map.getPanes().labelPane.appendChild(div)
      }
      // 覆盖物的位置
      customOverlay.prototype.draw = function () {
        var p = map.pointToOverlayPixel(this.point)
        this.div.style.left = p.x - 45 + 'px'
        this.div.style.top = p.y - 45 + 'px'
      }

      var marker = new BMap.Marker(point) // 这个可以清除
      map.addOverlay(marker)
      var marker2 = new customOverlay(point) // 这个清除不了？
      map.addOverlay(marker2)

      map.addEventListener('click', function(e) {
        map.clearOverlays()
      })
  </script>
</body>
</html>

8 条回复 • 2017-10-13 12:05:53 +08:00

opengps

2017-10-13 10:04:36 +08:00

两个点干嘛要重叠在一起？

yantianqi

2017-10-13 10:08:14 +08:00

@opengps 没有重新写一个 point,请问，为什么自定义的删除不了？哪里写错了？

ie88

2017-10-13 10:31:09 +08:00

customOverlay'用 removeOverlay()可以清除

yantianqi

2017-10-13 10:31:45 +08:00

@ie88 不可以用 clearOverlays()清除吗？

ie88

2017-10-13 10:32:55 +08:00

另外，初始化 marker 时，增加 enableMassClear()，该方法允许覆盖物在 map.clearOverlays 方法中被清除

cnbdas

2017-10-13 10:35:12 +08:00

@yantianqi customOverlay.prototype.initialize = function() {
var div = this.div = document.createElement('div')
div.className = 'circle-marker'
map.getPanes().labelPane.appendChild(div)
return div
}
少了 return

yantianqi

2017-10-13 11:14:36 +08:00

@cnbdas 谢谢大神，正解

ioth

2017-10-13 12:05:53 +08:00

web 地图 js，要细心，没办法跟踪的。