您的位置:首页 > 移动开发

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

2017-05-17 11:29 495 查看
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事件,但是等于说拖动事件被禁止了。

首先就是页面是
4000
放在微信端的。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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: