/** * Author 岳晓 *  * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动、多触点依然执行的bug * v1.0.0 */  (function(){  BMap.Map.prototype.on=function(evt,fn,option){  var _option = {  canBubble:true  }  extend(_option,option)  if(!evt || !fn) return;  var $this = this;  var evtList = ["longtouch","onetouch"];  if(inArray(evt,evtList)){  MesureEvents[evt]($this,evt,fn,option);  $this.getContainer().querySelector("div.BMap_mask").addEventListener(evt,fn);  }  else{  $this.addEventListener(evt,fn);  /*function(e){ if(option.canBubble){ e.domEvent.stopPropagation(); } fn.call(this,e); });*/  }  };  var centerAndZoom = BMap.Map.prototype.centerAndZoom;  BMap.Map.prototype.centerAndZoom  = function(){  var $this = this;  centerAndZoom.apply(this,arguments);  if(!$this.hasRegistMyTouch){  $this.on("onetouch",function(e){  //console.log(e);  var event = document.createEvent("MouseEvent");  event.initEvent("fastclick",true,true);  event.clientX = e.clientX;  event.clientY = e.clientY;  event.point = e.point;  $this.dispatchEvent(event);  var event = document.createEvent("MouseEvent");  event.initEvent("click",true,true);  event.clientX = e.clientX;  event.clientY = e.clientY;  $this.dispatchEvent(event);  });  $this.on("longtouch",function(e){  //console.log(e);  var event = document.createEvent("TouchEvent");  event.initEvent("longclick",true,true);  event.clientX = e.clientX;  event.clientY = e.clientY;  event.point = e.point;  $this.dispatchEvent(event);  });  $this.hasRegistMyTouch = true;  }  }  var MesureEvents = {  onetouch:function($this,evt,fn,data,option){  var ismoved;  var time = null;  var touchLocation = null;  var maxTouchesCount = 0;  var container = $this.getContainer();  var mask = container.querySelector("div.BMap_mask");  var panes = $this.getPanes();  $this.addEventListener("touchstart",function(e){  var temp = Math.max(maxTouchesCount,e.touches.length);  if(temp==1) {  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  maxTouchesCount = temp;  touchLocation = {  x:touch.clientX,  y:touch.clientY  };  time = new Date().getTime();  }  });  $this.addEventListener("touchmove",function(e){  maxTouchesCount = Math.max(maxTouchesCount,e.touches.length);  if(maxTouchesCount==1) {  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  if(Math.abs(touchLocation.x-touch.clientX)>0 && Math.abs(touchLocation.y-touch.clientY)>0){//解决部分手机对touchmove过分“敏感”的问题  ismoved = true;  //console.log("touchmove---");
                    }  else{  ismoved = false;  }  }  });  $this.addEventListener("touchend",function(e){  var touches =e.touches.length;  if(touches==0){  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  var temp = maxTouchesCount;  var tempM = ismoved;  ismoved= false;  maxTouchesCount = 0;  if(temp==1 && !tempM /*&& /BMap_mask/.test(e.srcElement.className)*/ && new Date().getTime()-time<500){  var event = document.createEvent("Event");  event.initEvent("onetouch",true,true);  var touch = e.changedTouches[0];  event.clientX = touch.clientX;  event.clientY = touch.clientY;  event.point =calLngLat($this,event.clientX,event.clientY);  mask.dispatchEvent(event,fn);  }     }  });  },  longtouch:function($this,evt,fn,data,option){  var ismoved;  var time = null;  var timeout;  var maxTouchesCount = 0;  var touchLocation = null;  var container = $this.getContainer();  var mask = container.querySelector("div.BMap_mask");  var panes = $this.getPanes();  $this.addEventListener("touchstart",function(e){  var temp = Math.max(maxTouchesCount,e.touches.length);  if(temp==1) {  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  maxTouchesCount = temp;  touchLocation = {  x:touch.clientX,  y:touch.clientY  };  time = new Date().getTime();  timeout = setTimeout(function(){  clearTimeout(timeout);  timeout = null;  longtouch(e);  },750);  }  });  $this.addEventListener("touchmove",function(e){  maxTouchesCount = Math.max(maxTouchesCount,e.touches.length);  if(maxTouchesCount==1) {  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  //console.log("move:" +touch.clientX +"," + touch.clientY);  if(Math.abs(touchLocation.x-touch.clientX)>=2 && Math.abs(touchLocation.y-touch.clientY)>2){//解决部分手机对touchmove过分“敏感”的问题  ismoved = true;  //console.log("touchmove---");  if(timeout){  clearTimeout(timeout);  timeout = null;  }  }  else{  ismoved = false;  }  }  else{  if(timeout){  clearTimeout(timeout);  timeout = null;  }  }  });  function longtouch(e){  var temp = maxTouchesCount;  var tempM = ismoved;  ismoved= false;  maxTouchesCount = 0;  if(temp==1 && !tempM){  var event = document.createEvent("Event");  event.initEvent("longtouch",true,true);  var touch = e.changedTouches[0];  event.clientX = touch.clientX;  event.clientY = touch.clientY;  event.point =calLngLat($this,event.clientX,event.clientY);  $this.getContainer().querySelector("div.BMap_mask").dispatchEvent(event);  }     }  $this.addEventListener("touchend",function(e){  var touches =e.touches.length;  if(touches==0){  var touch = e.changedTouches[0];  if(isAncestors(touch.target,[panes.floatPane,panes.markerMouseTarget,panes.markerPane],container)) return;  maxTouchesCount = 0;  ismoved= false;  }  if(new Date().getTime()-time<1000){  if(timeout){  clearTimeout(timeout);  timeout = null;  }  }  });  }  }  function calLngLat($this,x,y){  var container = $this.getContainer();  var rect = container.getBoundingClientRect();  var y = y - rect.top;  var x = x - rect.left;  var bounds = $this.getBounds();  var lefTop = new BMap.Point(bounds.getSouthWest().lng,bounds.getNorthEast().lat);  var lefTopPix = $this.pointToPixel(lefTop);  var pix = new BMap.Pixel(lefTopPix.x + x,lefTopPix.y+y);  var point = $this.pixelToPoint(pix);  return point;  }  function inArray(obj,array){  for(x in array){  if(obj==array[x]) return true;  }  return false;  }  function extend(o1,o2){  if(o1 && o2){  for(x in o2){  if(o2.hasOwnProperty(x) && o2[x]!=undefined){  o1[x] = o2[x];  }  }  }  }  function isAncestors(element,nodes,root){  var p = element;  while(p && p!=root){  if(inArray(p,nodes)){  return true;  }  p = p.parentElement;  }  return false;  }  })(BMap);  

转载于:https://www.cnblogs.com/hnsongbiao/p/7746796.html

百度地图手机端单触点单击和长按事件,解决部分手机(小米手机)地图单击事件失效,多触点、拖动依然触发长按的bug...相关推荐

  1. 百度地图手机端单触点单击和长按事件,解决部分手机(小米手机)地图单击事件失效,多触点、拖动依然触发长按的bug

    下面是实现的代码 /** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触 ...

  2. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...

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

    在调用百度地图API做开发的时候,有时需要在地图上添加点击事件,点击地图上某一点触发某个动作. 在web端,点击事件用map.addEventListener("click,function ...

  4. 高德地图手机端定位偏移问题

    手机端定位偏移问题 1.坐标系 WGS-84原始坐标系:也就是GPS定位拿到的经纬度,谷歌和高德在国外可以正常使用GPS定位,国内不允许各个平台使用GPS坐标. GCJ-02坐标系,又名火星坐标系,由 ...

  5. H.265流媒体播放器EasyPlayer手机端播放画面出现强制拉伸现象的解决办法

    我们在前期的文章中介绍过关于H5网页播放器EasyPlayer的功能更新,包括已经实现网页端实时录像.在iOS上实现低延时直播等.EasyPlayer流媒体播放器性能稳定.播放流畅,属于高可靠.高可用 ...

  6. 地图手绘图生成切片位置进行微调,使图片更精准地贴在地图上

    1 功能简介 以前对地图与图片进行配准操作,只能在地图和图片进行鼠标点击操作,取得图片与地图对应的位置点参数后进行切图,切图完成后才能用浏览器打开html文件调用切片,看一看是否准确贴图.这样的缺点一 ...

  7. 手机端网站底部悬浮 广告代码 代关闭_只要是安卓手机就不能少这个APP

    关注空城分享有助于提升自己噢! 资源信息来自网络,版权归作者本人所有,如有侵权可以通过邮件3367998540@qq.com与我联系处理,谢谢您的理解. 资源详情 资源名称:强力清理(安卓APP) 资 ...

  8. 手机端虚拟键盘弹出使界面布局混乱解决方法

    html5页面当点击input输入框弹出安卓手机上键盘就会把背景顶了上来,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 页面布局就乱了,解决方法: 原生js: wi ...

  9. 网站手机端seo优化方法和技巧

    作为一个寻求名声的网站所有者,从你选择创建一个网站的那一刻起,你就知道SEO(搜索引擎优化)是一个高度优先事项,这就是为什么现在是调整的好时机.SEO是一个不断发展的领域,百度对网站排名的方式有很多修 ...

  10. 手机端联网,电脑端借助手机端网络上网

    估计有wifi的电脑使用者,会经常使用电脑做热点,手机(也有wifi)借助电脑的网络来上网,这个估计大多数都有尝试,关于这个的文章,估计百度一搜,一大把.有时候会出现手机和电脑连上了,有信号,但不能上 ...

最新文章

  1. linux java程序控制台日志输出
  2. 15 款Python编辑器的优缺点,别再问我“选什么编辑器”啦!
  3. java ee7帮助文档_帮助推动Java EE向前发展
  4. [RCNN]-[YOLO]-[SSD]目标检测算法
  5. WebView 指南
  6. 推荐克莱夫·汤普森《天才程序员》
  7. Python单例模式4种方式
  8. 4G模块 EC03-DNC的常用AT指令操作及模块访问内网方法
  9. 小米11刷root记录
  10. 分享基于SpringBoot2+MybatiPlus+LayUI+Snaker+Mysql技术前后端分离开源后台管理系统脚手架
  11. 多电脑切换器(KVM切换器)工作原理
  12. AutoJs学习-实现momo点赞
  13. Unity-黑暗之魂复刻-角色攻击
  14. 本机与虚拟机WIN7之间互传文件
  15. H5响应式网站制作那些事
  16. 用胶带“粘”出的诺贝尔奖
  17. 找不到该项目 请确认该项目的位置_裕同拟在上海投7亿建包装新项目;可回收、可再用、可降解的生物基涂层雪糕包装来了;利安德巴塞尔美国50万吨/年PE新装置试车...
  18. matlab 裕度指令,稳定裕度的计算开环传递函数Matlab命令num.PPT
  19. 回溯法n后问题(具体代码实现,详细分析)
  20. linux 动态库 软链接,Linux操作系统下动态库的生成及链接方法

热门文章

  1. 14 英寸与 16 英寸 MacBook Pro 应该购买哪一款,M1 Pro 还是 M1 Max Mac?
  2. 如何禁用 7 个完全不必要的设置来优化 Mac?
  3. Diagrams for Mac(原生流程图制作工具)
  4. DaVinci Resolve Studio 17.4 for Mac(达芬奇剪辑调色软件)
  5. FoneDog Toolkit for Android如何从Android恢复丢失的文件
  6. Kite Compositor for Mac基本工具的使用教程
  7. 如何利用Mac电脑制作让你脱颖而出的简历
  8. java.lang.IllegalArgumentException at java.sql.Date.getHours
  9. 第十一次课:Python函数(二)
  10. 从 1 加到 55 的值