百度地图华为手机 addEventListener click 不兼容解决

问题：

项目中的使用了百度地图，前端在监听点击事件的时候是使用 map.addEventListener('click',function(){...})，苹果手机和小米手机均能出发该事件，但是华为手机确无法出发，或者偶尔用两个手指点击会触发(几率非常小)。后来通过几个博客了解到touch事件(本人后端程序员，对前端不太了解)。

原理：

通过监听touchstart和touchmove两个事件中，x1，y1和x2，y2的差值(绝对)，如果大于10px那么认为是拖动，否则认为是点击。
修改后的代码如下，供参考：

<!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"><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script><script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><!-- <script>var vConsole = new VConsole();</script> --><title>Document</title>
</head><body><div id="sch-box" class="sch-box"><div class="sch-input-cont"><input id="searchText" class="borderradius-3 sch-input" type="search" placeholder="请输入您车所在的位置"><span id="schInputDel"></span></div></div><div id="login_address"><a class="address-search" id="address-search" href="javascript:;"><span class="address-searchfont">点击定位当前位置</span></a></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div><div id="allmap"></div><script type="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=wrQtcxmVhln7DH3Ozx8RRK1xreYVIaT2"></script><!--加载鼠标绘制工具--><script type="text/javascript">var map;var geoc = new BMap.Geocoder();var myValue;$(function () {var p = { x1: 0, y1: 0, x2: 0, y2: 0 };$(".footers").hide();$("html").css("background-color", "#f5f5f5");var height = $(window).height() - 146;$("#allmap").css("height", height + 'px');map = new BMap.Map("allmap");var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 14);map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放//主要内容 Smap.addEventListener('touchstart', function (evt) {// console.log(evt)console.log('X:', evt.touches[0].clientX)p.x1 = p.x2 = evt.touches[0].clientX;console.log('Y:', evt.touches[0].clientY)p.y1 = p.y2 = evt.touches[0].clientY;})map.addEventListener('touchmove', function (evt) {console.log('X:', evt.touches[0].clientX)p.x2 = evt.touches[0].clientX;console.log('Y:', evt.touches[0].clientY)p.y2 = evt.touches[0].clientY;})map.addEventListener('touchend', function (evt) {//如果x轴或者y轴移动超过10px，那么认为是拖动，而不是点击(touch)，使用绝对值保证左右上下移动都可以计算正确if (Math.abs(p.x1 - p.x2) < 10 || Math.abs(p.y1 - p.y2) < 10) {alert('点击了地图')console.log(p);}else{alert('拖动了地图')console.log(p);}})
//主要内容 Emap.addEventListener('click', function () { console.log('touch2') })//该事件在部分华为手机无法出发，其他手机暂未发现})</script></body></html>

结果：

移动距离小于10px

image.png
移动距离大于10px

image.png

查看全文

http://www.taodudu.cc/news/show-5341316.html

BottomSheetDialogFragment实现地图导航弹窗效果
【读点论文】A Survey on Vision Transformer,2022年华为诺亚最新综述研究，从发展到任务，整体到局部。ViT有研究价值在于有很多问题还没有解决，真理是阶段性的产物
【2019华为杯研究生数学建模大赛】国二经验体会
华为机试样题
Android百度地图相关总结
【华为OD机试模拟题】用 C++ 实现 - 病菌感染（2023.Q1）
LeetCode - 1162 地图分析
华为OD机试 - 图像物体的边界
vue密码包含大写字母、小写字母、数字、特殊符号
python输出九行数字金字塔_python打印数字金字塔
数字大写
磁盘分区管理
圆周率π的计算
[软件工程导论(第六版)]第9章面向对象方法学引论（课后习题详解）
小程序批发订货怎么做
日用化妆品行业如何利用订货软件进行统一管理
餐饮连锁行业为什么需要订货软件
Preference 定义字体颜色
独立成分分析ICA在MATLAB中的实现
独立成分分析(ICA)降噪应用时存在哪些问题？
谈一谈独立成分分析(ICA)降噪应用时存在的问题
【图像分割】基于 K-means 聚类算法实现图像区域分割matlab代码
西安前端面试题总结
一年之后
什么是数据资产？
数据本质价值的一些思考
《慈父家训》-一篇不错的文章
谁为刘翔和中国人心理解压？
第04章御前比武
高可靠性软件测试方案探讨

百度地图华为手机 addEventListener click 不兼容解决相关推荐

android电话按钮无响应,华为手机死机、按键无响应怎么办？华为手机死机无响应解决方法...
手机死机.卡死.按键无响应的时候您着急,咱先解决了问题再寻找手机卡死的原因. 华为手机死机无响应解决方法一.卡顿等待无结果,先重启! 大家都会吧!长按电源键3秒,然后选择"重启" ...
android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
华为解锁密码忘了怎么办用计算机,不记得手机锁屏密码怎么办_华为手机密码忘了的解决方法－系统城...
日常使用手机时,为了让手机里的信息更加的安全,很多用户都会给手机设置锁屏密码.不过近日有使用华为手机的网友却遇到了不记得手机锁屏密码的情况,不清楚怎么办,所以今天本文为大家分享的就是关于华为手机密码忘 ...
使用百度地图获取手机GPS定位
Grolocation的功能有多钟,如果在电脑端的浏览器使用此方法,api会取你本机的外网ip地址来定位, 如果是用手机浏览器使用此方法,api会获取你的GPS进行定位,当然啦,使用之前都是需要先经过 ...
百度地图获取手机屏幕坐标
百度地图sdk获取手机屏幕左上右下的坐标经纬度前段时间开发项目中,使用了baiduSdk,有一个是需求是获取手机屏幕的左上右下的经纬度,当时候正也是醉了,没怎么用过baidu地图SDK,然后就自己摸 ...
百度地图显示无法连接服务器,百度地图为什么打不开该怎么解决
有很多的人都遇到过百度地图打不开的情况.为什么百度地图会打不开呢?下面是学习啦小编精心为你整理的百度地图打不开的原因,一起来看看. 百度地图打不开的原因一.电脑版第一个可能性比较大的是网页本身的问 ...
【无标题】设备无法连接华为手机助手或连接不稳定解决办法
一.请确认华为手机助手是最新版本电脑端:参考:如何更新电脑端华为手机助手版本? ①点击电脑端界面右上角的设置按钮,在下拉框中选择"检查更新"弹出检查更新的弹框.如果未发现新版本, ...
百度地图 | 定位到大西洋的几内亚湾的解决方法
初次使用百度地图Demo的定位功能当打开流量,WiFi,GPS发现都定位到了几内亚湾,无法正确定位如下图: 解决方法: 在new LocationClient(getApplicationCont ...
百度地图调用手机陀螺仪完成指向功能
一.写一个获取方向角的类 public class MyOrientationListener implements SensorEventListener {private SensorManage ...

百度地图华为手机 addEventListener click 不兼容解决

问题：

原理：

结果：

相关文章：

百度地图华为手机 addEventListener click 不兼容解决相关推荐

最新文章

热门文章

百度地图 华为手机 addEventListener click 不兼容解决

问题：

原理：

结果：

相关文章：

百度地图 华为手机 addEventListener click 不兼容解决相关推荐

最新文章

热门文章

百度地图华为手机 addEventListener click 不兼容解决

百度地图华为手机 addEventListener click 不兼容解决相关推荐