移动端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 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 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版微信公众平台红包API
2015/04/02 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
大学生的创业计划书就该这么写
2014/01/30 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
学生安全责任协议书
2016/03/22 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript