百度地图手机端浏览器对点击事件不灵敏

在调用百度地图API做开发的时候，有时需要在地图上添加点击事件，点击地图上某一点触发某个动作。

在web端，点击事件用map.addEventListener("click,function(e){})绑定即可。

但如果是H5项目，你会发现在手机上百度地图的click事件是不灵敏的，这是因为百度地图网页版在PC端和手机端有不同的处理，手机端屏蔽了click事件，默认拖动事件。所以我们在做手机端的项目的时候不应使用map.addEventListener("click,function(e){})，而应使用map.addEventListener("touchstart",function(e){}触摸事件。

但这样的话就又有一个问题，也许我们只是想滑动一下地图，并不想触发点击地图上某一点触发的事件，但只要我们的手指触碰到屏幕，事件就会被触发。

如何区分点击事件和滑动事件，使得在滑动手机屏幕的时候不触发点击事件呢？

解决办法是，在触发滑动事件的时候（touchmove）记录开始和结尾的横纵坐标，在手指抬起的时候（touchend）根据横纵坐标计算滑动平移的距离，如果距离不为0，说明是滑动事件，不触发动作，如果等于0，说明是点击事件，触发动作。

window.onload = function () {// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));     map.setCurrentCity("北京");   var xArr = [];//存放横坐标var yArr = [];//存放纵坐标map.addEventListener("touchstart", function(e){ //手指触摸屏幕的时候清空两个数组xArr.length = 0;yArr.length = 0;}); map.addEventListener("touchmove",function(e){//如果滑动了屏幕，xArr和yArr将各存入两个坐标值，即始末坐标值xArr.push(e.targetTouches[0].pageX);yArr.push(e.targetTouches[0].pageY);});map.addEventListener('touchend',function(e){var far;var flag = true;//计算平移距离，区分滑动事件和点击事件if((xArr.length > 1) && (yArr.length > 1)){far = (Math.abs(xArr[0]-xArr[1]))^2 + (Math.abs(yArr[0]-yArr[1]))^2;if(far > 0){flag = false;}}if(flag){//获取经纬度var pt = e.point;//创建一个标注，经纬度是当前点击位置var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));//将新的标注添加到地图上时先清空其他的标注map.clearOverlays();//将标注添加到地图上map.addOverlay(marker);}});
};

这样就可以解决问题了

百度地图手机端浏览器对点击事件不灵敏相关推荐

百度地图手机端单触点单击和长按事件，解决部分手机(小米手机)地图单击事件失效，多触点、拖动依然触发长按的bug
下面是实现的代码 /** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触 ...
百度地图：为标记添加点击事件显示标注
之前写了百度地图的标注,原文链接:使用百度地图API实现地图生成.标记以及标注,但是因需求更改,标注的显示需要通过点击标记才能显示. 以下为更改内容: //给标记添加点击事件以及显示窗口信息var i ...
【百度地图API】如何判断点击的是地图还是覆盖物？
原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...
JS判断是PC浏览器还是手机端浏览器
JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址 <!DOCTYPE html> <html> <script> function brows ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
PC端微信浏览器js点击事件失效
**电脑端微信浏览器js点击事件失效**前段时间发现开发的一个微信公众号上一个按钮的点击事件在手机上是正常的,电脑端手机微信里却不起作用.在网上找了好久都没有找到解决办法.后来查看其它的页面的同样的点 ...
js 原生方法 -- 模拟浏览器的点击事件
js 原生方法 – 模拟浏览器的点击事件 1. 创建自定事件并监听可看看 MDN 的 Evnet, CustomEvent 对象 <!DOCTYPE html> <html la ...
高德地图手机端定位偏移问题
手机端定位偏移问题 1.坐标系 WGS-84原始坐标系:也就是GPS定位拿到的经纬度,谷歌和高德在国外可以正常使用GPS定位,国内不允许各个平台使用GPS坐标. GCJ-02坐标系,又名火星坐标系,由 ...
百度地图手绘线坐标获取
背景: 需要在百度地图上获取手绘图形的坐标信息,在太乐地图上绘制,并导出kml后,发现位置叠加不对.想到直接在百度地图上绘制,在console中直接获取. 方法: 在百度地图上,用测距工具勾绘图形,双 ...

百度地图手机端浏览器对点击事件不灵敏

百度地图手机端浏览器对点击事件不灵敏相关推荐

最新文章

热门文章