解决高德地图label添加的点击事件在移动端无效

最新推荐文章于 2023-12-04 14:59:04 发布

weixin_33851177

最新推荐文章于 2023-12-04 14:59:04 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript swift ViewUI

原文链接：https://segmentfault.com/a/1190000017247030

本文解决了高德地图在移动端marker上的click事件被屏蔽的问题，通过手动添加touchstart事件实现了label的点击响应，适用于PC端和移动端的适配需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决高德地图label添加的点击事件在移动端无效

近日工作中需要用到高德地图在PC端和移动端同时适配的需求，在PC端撸代码和调试一切顺利，但是在将项目在平板中测试
时，发现绑定在label中的click事件无法触发；通过各种调试发现应该是高德在移动端的marker上屏蔽了click事件；
原代码如下：

        self.pointers[item].setLabel({
            //label默认蓝框白底左上角显示，样式className为：amap-marker-label
          offset: new AMap.Pixel(25, 5), //右侧
          zIndex: 99,
          content:
            "<div class='map-label'><span class='map-label-name'>" +
            self.allData.filter(b => b.seqno == item)[0].shortTitle +
            "</span><a href='javascript:void(0)' class='map-label-link' id='label-" +
            item +
            "' onclick='clickLink(this, event)' seqno='" +
            item +
            "'><i class='iconfont icon-arrow-double-right'></i></a></div>"
        });

解决方案：手动给label添加touchstart事件

        let btn = document.getElementById("label-" + item);
        btn.addEventListener(
          "touchstart",
          function(event) {
            self.$router.push({
              path: "/screenProject",
              query: { seqno: item }
            });
          },
          false
        );

特此记录一下踩坑过程！