美文网首页
解决Vue中百度地图自定义覆盖物的点击事件在移动端无法触发的问题

解决Vue中百度地图自定义覆盖物的点击事件在移动端无法触发的问题

作者: 前端辉羽 | 来源:发表于2022-03-17 14:46 被阅读0次

    项目需求中需要动态渲染出一些多边形和行政区域,并且用户在点击这些覆盖物的时候,弹出一些介绍信息


    如图所示.png

    事件绑定代码如下,以圆圈形覆盖物Circle为例

    Circle.addEventListener('click', () => {
      Toast({
        message: '覆盖物的介绍信息',
        position: 'top',
      })
    })
    

    当前页面改成PC的时候,点击事件可以正常,但是手机页面就无法正常触发,注意,我这里遇到的问题只是自定义覆盖物在移动端无法正常点击事件,但是原生的覆盖物marker还是可以正常触发的。
    问题初步定为是因为移动端的百度地图可能默认禁掉了对应的事件,尝试百度查找一下解决方法,找到了以下四种方法

    1.禁用地图的拖拽功能,click事件就会正常触发

    map.disableDragging(); 
    

    尝试了一下,不起效果,禁用掉拖拽,也无法正常触发覆盖物的点击事件

    2.使用touchstart,touchend等事件代替click
    都进行了尝试,无效。

    3.初始化百度地图的时候加上drawer参数设置地图绘制方式

    const map = new BMap.Map("allmap", { drawMargin: 100, drawer: BMAP_SVG_DRAWER_FIRST })
    map.addEventListener('click', function(e) {
        circle.customClickHandler_ = function() {
            console.log('点击了 circle')
        };
        if(e.overlay && e.overlay.customClickHandler_) {
            e.overlay.customClickHandler_.call(e.overlay, e);
        }
    });
    

    不知道这样添加的意义,反正试了也是没效果

    4.引用百度的官方插件EventWrapper,并通过插件暴露的对象去添加点击事件
    文件地址:http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.js
    添加事件:

    BMapLib.EventWrapper.addDomListener(div, "touchend", function(e){
             //...点击操作
             console.log(pointer)
    });
    

    尝试了,依然不起效果。

    查看了几十遍文章,大多是复制的,来来回回也就只看到这四种解决方法,都没能解决问题,没办法,只能自己去啃百度地图的官方API文档,相关API的地址:https://lbsyun.baidu.com/jsdemo.htm#kOverlayAddEvent
    将文档里的代码原样都复制到自己的项目,都无法正常触发事件,仔细检查,发现问题只剩使用的百度地图的版本不一致这一点了,修改了一下版本,竟然真的可以了,天坑。。。
    原来的版本是v3.0,修改成v1.0&type=webgl
    注意修改成webgl版本,命名空间也要从BMap改为BMapGL,我是在vue的单个页面中动态引入的百度地图,引用代码修改如下:

    export default {
      init: function () {
        //console.log("初始化百度地图脚本...");
        const AK = 'your ak'
        const BMap_URL =
          'https://api.map.baidu.com/api?type=webgl&v=1.0&ak=' + AK + '&callback=onBMapCallback'
        return new Promise((resolve, reject) => {
          // 如果已加载直接返回
          if (typeof BMapGL !== 'undefined') {
            resolve(BMapGL)
            return true
          }
          // 百度地图异步加载回调处理
          window.onBMapCallback = function () {
            console.log('百度地图脚本初始化成功...')
            resolve(BMapGL)
          }
    
          // 插入script脚本
          let scriptNode = document.createElement('script')
          scriptNode.setAttribute('type', 'text/javascript')
          scriptNode.setAttribute('src', BMap_URL)
          document.body.appendChild(scriptNode)
        })
      },
    }
    

    相关文章

      网友评论

          本文标题:解决Vue中百度地图自定义覆盖物的点击事件在移动端无法触发的问题

          本文链接:https://www.haomeiwen.com/subject/dmjvdrtx.html