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

2017-10-19 16:34:54 +08:00
 yantianqi

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

<!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>
7402 次点击
所在节点    程序员
6 条回复
yantianqi
2017-10-19 17:52:26 +08:00
有没有做过的啊?
怎么给覆盖物绑定事件呢?
xeis
2017-10-19 17:57:30 +08:00
自定义的是 overlay,预设的是 marker,这两个有可比性么?
yantianqi
2017-10-19 18:02:40 +08:00
@xeis 自定义的 overlay 可以绑定事件吗?
Fooleap
2017-10-19 18:11:46 +08:00
```
document.querySelector('.circle-marker').addEventListener('click', function() {
console.log('点击了自定义覆盖物');
})
```
cnbdas
2017-10-20 09:00:00 +08:00
// 自定义覆盖物添加事件方法
customOverlay.prototype.addEventListener = function (event, fun) {
        this.div['on' + event] = fun;
    }
yantianqi
2017-10-20 10:33:09 +08:00
@cnbdas 谢谢大神

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/398987

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX