移动端Html5中百度地图的点击事件

所属分类: 网页制作 / html5 阅读数: 985
收藏 0 赞 0 分享

根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件:

touchstart, touchmove, touchend, longpress

而如果地图上监听了 click 事件,在移动端是不会执行这个事件里面的代码的。

我之前做一个需求时,给地图监听了 touchend 事件,不曾想当我拖动地图时,也执行了 touchend 里的代码。所以需要模拟一个像 zepto 中的 tap 事件,就能解决这个问题了。

我的代码是:

function initMap(baseData) {
    var mp = new BMap.Map('map');
    var point = new BMap.Point(
      baseData.data.gardenLongitude,
      baseData.data.gardenLatitude
    );

    mp.centerAndZoom(point, 15);

    // 保存 touch 对象信息
    var obj = {};

    mp.addEventListener('touchstart', function (e) {
      obj.e = e.changedTouches ? e.changedTouches[0] : e;
      obj.target = e.target;
      obj.time = Date.now();
      obj.X = obj.e.pageX;
      obj.Y = obj.e.pageY;
    });

    mp.addEventListener('touchend', function (e) {
      obj.e = e.changedTouches ? e.changedTouches[0] : e;
      if (
        obj.target === e.target &&
        
        // 大于 750 可看成长按了
        ((Date.now() - obj.time) < 750) &&
        
        // 应用勾股定理判断,如果 touchstart 的点到 touchend 的点小于 15,就可当成地图被点击了
        (Math.sqrt(Math.pow(obj.X - obj.e.pageX, 2) + Math.pow(obj.Y - obj.e.pageY, 2)) < 15)
      ) {
        // 地图被点击了,执行一些操作
        doSomething();
      }
    });
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下
收藏 0 赞 0 分享

html5实现图片转圈的动画效果——让页面动起来

这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

html5清空画布方法(三种)

本篇文章主要介绍了html5清空画布方法(三种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5 文件域+FileReader 分段读取文件并上传到服务器

这篇文章主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
收藏 0 赞 0 分享

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

这篇文章主要介绍了基于HTML5的WebGL实现json和echarts图表展现在同一个界面的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

解决HTML5手机端页面缩放的问题

这篇文章主要介绍了解决HTML5手机端页面缩放的问题的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5新特性之语义化标签

HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于HTML5 Canvas的3D动态Chart图表的示例

这篇文章主要介绍了基于HTML5 Canvas的3D动态Chart图表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5添加禁止缩放功能

本文通过一段代码给大家介绍了HTML5添加禁止缩放功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

如何避免常见的6种HTML5错误用法

本文是小编给大家收藏整理的关于常见的6种HTML5错误用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多