V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Sponsored by
二向箔安全
​一对一的线上 web 安全培训服务
咨询微信:twosecurityrefer
Promoted by 二向箔安全
V2EX  ›  程序员

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

  •  
  •   yantianqi · 60 天前 · 787 次点击
    这是一个创建于 60 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    <!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
        1
    yantianqi   59 天前
    有没有做过的啊?
    怎么给覆盖物绑定事件呢?
        2
    xeis   59 天前 via Android
    自定义的是 overlay,预设的是 marker,这两个有可比性么?
        3
    yantianqi   59 天前
    @xeis 自定义的 overlay 可以绑定事件吗?
        4
    Fooleap   59 天前
    ```
    document.querySelector('.circle-marker').addEventListener('click', function() {
    console.log('点击了自定义覆盖物');
    })
    ```
        5
    cnbdas   59 天前   ♥ 1
    // 自定义覆盖物添加事件方法
    customOverlay.prototype.addEventListener = function (event, fun) {
            this.div['on' + event] = fun;
        }
        6
    yantianqi   59 天前
    @cnbdas 谢谢大神
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2631 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 56ms · UTC 08:41 · PVG 16:41 · LAX 00:41 · JFK 03:41
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1