Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案

解决百度地图 手机端 点击事件不触发 的一种方案

版权声明:本文为博主原创文章,转载请标明原文出处。 

问题背景

我是半路接手的这个项目,该项目使用 Vue 开发的一款 手机端的页面。到手里时,使用百度地图的部分已经完成,之前的兄弟在开发是一只都是在 PC 端用浏览器的手机设备模式调式,并没有任何问题。。。

 

具体问题:

设 地图页面地址:192.166.1.112::8090/#/map

对 “地图” 添加 click 事件,在点击地图时,可以在获取到点击位置的 经纬度。代码如下图所示

Vue 项目嘛, npm run dev 启动,手机与电脑在同一局域网,我用手机浏览器访问: 192.166.1.112::8090/#/map;此时再次点击地图发现点击事件会出现不被触发,点击事件无效。

 

解决方案

我经过了好长时间的网上探索,发现了两个对我有用的信息,

一、第一条信息我不明白是如果解决的问题,所以没用(其实是我用了之后没效果。。。);

       附该信息博客地址:https://blog.csdn.net/yyyuuueeee/article/details/49511173

       希望大家看了这篇博客有所收获,我感觉这篇博客是能解决该问题的,但是我用了就是没效果。。

二、在查找资料的过程中突然发现一个非常有用的信息

       手机端 禁用地图拖拽 click事件就会被触发

      我立刻就测试了一下,我靠,果然有作用! 但是蛋疼的问题有出现了,此时地图已经不可以拖拽了。

      我先说下 禁用地图拖拽 方法:

// 禁用地图拖拽
map.disableDragging();   

// 开启地图拖拽
map.enableDragging();

   具体可以参考 百度地图 类参考文档http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

 

解决移动端 可以拖拽又可以点击

百度地图事件中有 针对 移动端的 触摸事件:

解题思路:

触摸结束    -->  开启 禁止拖拽

触摸移动中 -->  开启 启用拖拽

我在不接着喷啦,直接上代码:

​
        var map = new BMap.Map("atlas");
        map.centerAndZoom(this.city, 12);
        map.setMapType(BMAP_HYBRID_MAP);
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.MapTypeControl({
          mapType: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]
        }));

        //TODO: click 事件 移动端会被屏蔽
        map.addEventListener("click", function (e) {

          console.log("该点的经纬度为:" + e.point.lng + " , " + e.point.lat);
          _this.getCropList();
          _this.getFeatureIDByLocation(e.point.lng, e.point.lat);
        });

        // TODO: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动,但是可以触发拖动事件。
        map.addEventListener("touchmove", function (e) {
          map.enableDragging();
        });
        // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
        map.addEventListener("touchend", function (e) {
          map.disableDragging();
        });

        // 初始化地图 禁止拖动   注:虽禁止拖动,但是可以出发拖动事件
        map.disableDragging();

        map.enableScrollWheelZoom(true);

​

个人总结

真感觉半路上手走一步一个坑。

希望该文章能给大家带来帮助!动动你们的漂亮的小手多多点赞!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 6

打赏作者

大憨豆先生

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值