V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yantianqi
V2EX  ›  程序员

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

  •  1
     
  •   yantianqi · 2017-10-19 16:34:54 +08:00 · 7380 次点击
    这是一个创建于 2352 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <!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
    yantianqi
        1
    yantianqi  
    OP
       2017-10-19 17:52:26 +08:00
    有没有做过的啊?
    怎么给覆盖物绑定事件呢?
    xeis
        2
    xeis  
       2017-10-19 17:57:30 +08:00 via Android
    自定义的是 overlay,预设的是 marker,这两个有可比性么?
    yantianqi
        3
    yantianqi  
    OP
       2017-10-19 18:02:40 +08:00
    @xeis 自定义的 overlay 可以绑定事件吗?
    Fooleap
        4
    Fooleap  
       2017-10-19 18:11:46 +08:00
    ```
    document.querySelector('.circle-marker').addEventListener('click', function() {
    console.log('点击了自定义覆盖物');
    })
    ```
    cnbdas
        5
    cnbdas  
       2017-10-20 09:00:00 +08:00   ❤️ 1
    // 自定义覆盖物添加事件方法
    customOverlay.prototype.addEventListener = function (event, fun) {
            this.div['on' + event] = fun;
        }
    yantianqi
        6
    yantianqi  
    OP
       2017-10-20 10:33:09 +08:00
    @cnbdas 谢谢大神
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3329 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:44 · PVG 21:44 · LAX 06:44 · JFK 09:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.