手机移动端百度开发覆盖物点击事件不起作用

最新推荐文章于 2022-11-16 13:30:42 发布

原创最新推荐文章于 2022-11-16 13:30:42 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

百度地图开发专栏收录该内容

5 篇文章

订阅专栏

在使用百度地图JavaScript API 2.0版本的项目中，遇到手机移动端自定义覆盖物的Click事件无法触发的问题。尝试了更换为touch事件、使用EventWrapper库以及阻止地图点击事件等方法均无效。最终解决方案是在自定义覆盖物初始化时添加touch事件。参考代码和百度开源库的EventWrapper提供了解决方案。

div.addEventListener('touchstart',function(e){
    console.log("内部定义的：touchstart");
    console.log(e.target.textContent);
    this.style.backgroundColor = "#6BADCA";
    this.style.borderColor = "#fff";  //边框颜色

})

我在移动端使用了百度地图，给地图添加了click事件，跳转新页面。在网页端测试时完全没有问题，但是在移动端点击却没有反应。如果用touch事件的画整个地图的拖动缩放都不能用了，直接一接触地图就跳转了map.addEventListener("click", function(e){   //点击事件    window.location.href='./test.html';
});找了半天资料没看到相似情况。不知道该怎么解决。我想在移动端实现点击click事件。不影响地图的所有功能。现在只用map.disableDragging();才能触发click事件，但是等于说拖动事件被禁止了。

 
首先就是页面是放在微信端的。iOS端表现正常，点击和拖动可以同时存在。Android端表现有问题，click和drag必须舍弃一个。我的解决办法：

     
      
                   if (isAndroid()) {
                $('.BMap_mask').on('touchstart', function (e) {
                    map.disableDragging();
                });               $('.BMap_mask').on('touchmove', function (e) {
                    map.enableDragging();
                });
                $('.BMap_mask').on('touchend', function (e) {
                    map.disableDragging();
                })              
                map.addEventListener("click", function (e) {
});
            }else{
}

最近在用百度地图的javascript API做一个项目，API版本2.0，使用到了自定义覆盖物。

在PC端一切正常，然后在手机端，也就是移动版的，自定义覆盖物的Click事件无法触发，试了多种方法都不行。

网友的方法也试了，无外乎三种，一种是改用touch事件，一种是使用开源库里的EventWrapper，一种是先把map的click事件保存成设置为null，然后在自定义覆盖物的touchstart或touchend事件里先执行map的click现执行其它代码。三种都试了，都不行。

最后找到一个解决办法，就是在自定义覆盖物的初始化方法里添加touch事件。

贴上示例代码：测试：只有在接口内定义才有效果

CustomMarkerOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
var img=this._img=document.createElement("img");
img.src="1.png";
//这里对img添加事件，也可以对div或其它dom添加事件。
img.addEventListener('touchstart',function(){
alert('touch started');
});
img.addEventListener('touchmove',function(){
console.log('touching');
});
img.addEventListener('touchend',function(){
alert('touch end');
})
div.appendChild(img);
map.getPanes().labelPane.appendChild(div);
return div;

}

百度的开源库实现方法。
http://developer.baidu.com/map/index.php?title=open/library——》事件包装器，引入js文件，然后根据api调用方法：http://api.map.baidu.com/library/EventWrapper/1.2/docs/symbols/BMapLib.EventWrapper.html