根据百度地图官方解释,在移动端 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();
}
});
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。