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

CarlBenjamin 发布于2019-08-23 13:52 / 2487人阅读

摘要：解决高德地图添加的点击事件在移动端无效近日工作中需要用到高德地图在端和移动端同时适配的需求，在端撸代码和调试一切顺利，但是在将项目在平板中测试时，发现绑定在中的事件无法触发通过各种调试发现应该是高德在移动端的上屏蔽了事件原代码如下默认蓝框白

解决高德地图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:
            "" +
            self.allData.filter(b => b.seqno == item)[0].shortTitle +
            ""
        });

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

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

特此记录一下踩坑过程！

GPU云服务器云服务器 js函数添加点击事件高德地图高德地图大数据高德地图android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99694.html

PokemonGo：LBS游戏开发

摘要：优化后的方案降低了捕捉门槛，也鼓励用户走动去发现和捕捉更多精灵。写在前面去吧！皮卡丘！小时候拥有一台任天堂是多少熊孩子的梦想，每个夜晚被窝里透出的微弱光线，把小小的童年带入另一个世界，家门口的鸟和狗，森林里的虫和瀑布，山洞里的超音蝠，带着小小的梦，走过一个个城市，一路冒险，飞天潜水，攀瀑碎岩，所向披靡。每个醒来的清晨，都恍如出门冒险的那天~ 要做什么基于开放地图二次开发，完成简易...

daydream 2019-08-22 10:53 评论0 收藏0
PokemonGo：LBS游戏开发

摘要：优化后的方案降低了捕捉门槛，也鼓励用户走动去发现和捕捉更多精灵。写在前面去吧！皮卡丘！小时候拥有一台任天堂是多少熊孩子的梦想，每个夜晚被窝里透出的微弱光线，把小小的童年带入另一个世界，家门口的鸟和狗，森林里的虫和瀑布，山洞里的超音蝠，带着小小的梦，走过一个个城市，一路冒险，飞天潜水，攀瀑碎岩，所向披靡。每个醒来的清晨，都恍如出门冒险的那天~ 要做什么基于开放地图二次开发，完成简易...

Michael_Lin 2019-08-01 17:26 评论0 收藏0
PokemonGo：LBS游戏开发

摘要：优化后的方案降低了捕捉门槛，也鼓励用户走动去发现和捕捉更多精灵。写在前面去吧！皮卡丘！小时候拥有一台任天堂是多少熊孩子的梦想，每个夜晚被窝里透出的微弱光线，把小小的童年带入另一个世界，家门口的鸟和狗，森林里的虫和瀑布，山洞里的超音蝠，带着小小的梦，走过一个个城市，一路冒险，飞天潜水，攀瀑碎岩，所向披靡。每个醒来的清晨，都恍如出门冒险的那天~ 要做什么基于开放地图二次开发，完成简易...

ziwenxie 2019-08-29 13:09 评论0 收藏0
用Vue3管理后台项目实现高德地图的选点

　　现在客户来了一个项目简况：有一个业务场景是添加门店的地址和经纬度，地址可以输入，参考用经纬度当然不行，目前有最好方式就是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。现在我们就看具体的内容。　　登录高德开放平台　　创建应用，添加Key，选择Web端(JS API)，生成Key和安全密钥　　引入地图 JSAPI　　项目中使用了官方推荐的 JSAPILoader 来加载地图　　安装官方 ...

3403771864 2022-10-26 22:57 评论0 收藏0
高德地图 Javascript API 入门（四）

摘要：高德地图入门四地图覆盖物覆盖物类名说明是否插件点标记否覆盖物点标记复杂点标记对象，对普通点标记的扩展否覆盖物折线否覆盖物多边形否覆盖物圆否图片覆盖物否地图右键菜单否点标记预览自定义点标记预览多边形预览右键菜单添加右键菜单内容项放大缩小添加高德地图 Javascript API 入门（四）地图覆盖物覆盖物类名说明是否插件 AMap.Marker 点标记否 AM...

AlanKeene 2019-08-20 14:29 评论0 收藏0