百度地图自定义覆盖物，点击事件怎么触发？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

如下代码，同样的方式
自定义覆盖物的点击触发不了
预设的覆盖物点击就可以触发

<!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);  // 创建点坐标
      var point2 = new BMap.Point(116.400551, 39.964534)
      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(point2) 
      map.addOverlay(marker2)

      marker.addEventListener('click', function() {
        console.log('点击了预设覆盖物')
      })

      marker2.addEventListener('click', function() {
        console.log('点击了自定义覆盖物')
      })
  </script>
</body>
</html>

6 条回复 • 2017-10-20 10:33:09 +08:00