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


Posted in HTML / CSS onJanuary 31, 2019

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

touchstart, touchmove, touchend, longpress

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

而如果地图上监听了 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();
      }
    });
  }

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

HTML / CSS 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
You might like
php数组指针操作详解
2017/02/14 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
自我评价如何写好?
2014/01/05 职场文书
校园十大歌手策划书
2014/02/01 职场文书
旷课检讨书1000字
2014/02/14 职场文书
搞笑爱情保证书
2014/04/29 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014年体育部工作总结
2014/11/13 职场文书
作文批改评语
2014/12/25 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python