百度地图自定义覆盖物，在手机上无法监听click事件

最近在做手机web端集成百度地图遇到了个坑儿；手机端不支持自定义覆盖物的click事件；
1.自带的marker是支持的（marker不属于自定义覆盖物）

// An highlighted block
var marker = new BMap.Marker(hisPlayView[i],{title:i.toString()});
marker.addEventListener('click',func);function func(){alert();
}

2.引用百度开源库也可以
引入js：http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.js

// An highlighted blockvar mySquare = new SquareOverlay(point1, '金地', '待定','250','1');//mySquare 属于自定义覆盖物map.addOverlay(mySquare);
BMapLib.EventWrapper.addDomListener(mySquare ._div, "touchend", function(e){// console.log(e);
});

3.直接在覆盖物初始化里面添加监听事件
栗子如下面代码中我注释的那里（如果不在意误触是可以用的touchend方法）；
**但是以上方法都不满足我的需求！！**以上方法会造成地图拖动时只要一碰到覆盖物就会执行click事件；
我的需求是拖动的时候没效果，点击的时候才会触发；以下直接上我的实例代码：

// An highlighted block
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<div id="allmap"></div>
<script type="text/javascript">// 定义自定义覆盖物的构造函数function SquareOverlay(center, projectName, pirce,projectId,projectType){this._center = center;this._projectName = projectName;this._pirce = pirce;this._projectId = projectId;this._projectType = projectType;}// 继承API的BMap.OverlaySquareOverlay.prototype = new BMap.Overlay();// 实现初始化方法SquareOverlay.prototype.initialize = function(map){// 保存map对象实例this._map = map;// 创建div元素，作为自定义覆盖物的容器var div = document.createElement("div");div.style.position = "absolute";// 可以根据参数设置元素外观div.style.width = 60 + "px";div.style.height = 50 + "px";
//        div.style.background = this._color;var pNames = document.createElement("span");pNames.appendChild(document.createTextNode(this._projectName));pNames.setAttribute("projectId",this._projectId);pNames.setAttribute("projectType",this._projectType);div.appendChild(pNames)var pPrice = document.createElement("span");pPrice.appendChild(document.createTextNode(this._pirce));div.appendChild(pPrice);
//        div.addEventListener("touchend",function (e) {///当时使用后来被放弃了，因为这要一触碰就会跳转，影响体验
//            var tagetSpan = $(e.currentTarget).find('span').eq(0);
//            var projectId =   $(tagetSpan).attr('projectId');
//            var projectType =  $(tagetSpan).attr('projectType');
//            window.location.href= '/fang1/'+projectId+'-'+projectType+'.htm';
//        })div.addEventListener("click", function(e){ //此事件如果不禁用map的拖拽是不好用的，禁用了才会执行var tagetSpan = $(e.currentTarget).find('span').eq(0);var projectId =   $(tagetSpan).attr('projectId');var projectType =  $(tagetSpan).attr('projectType');window.location.href= '/fang1/'+projectId+'-'+projectType+'.htm';});// 将div添加到覆盖物容器中map.getPanes().markerPane.appendChild(div);// 保存div实例this._div = div;// 需要将div元素作为方法的返回值，当调用该覆盖物的show、return div;}// 实现绘制方法SquareOverlay.prototype.draw = function(){// 根据地理坐标转换为像素坐标，并设置给容器var position = this._map.pointToOverlayPixel(this._center);this._div.style.left = position.x+ "px";this._div.style.top = position.y + "px";}// 实现显示方法SquareOverlay.prototype.show = function(){if (this._div){this._div.style.display = "";}}// 实现隐藏方法SquareOverlay.prototype.hide = function(){if (this._div){this._div.style.display = "none";}}// 初始化地图var map = new BMap.Map("allmap");    // 创建Map实例var point = new BMap.Point(123.438973, 41.798756);map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别map.setCurrentCity("sy");          // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放//TODO: click 事件 移动端会被屏蔽map.addEventListener("click", function (e) {console.log("该点的经纬度为：" + e.point.lng + " , " + e.point.lat);});// TODO: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。map.addEventListener("touchmove", function (e) {map.enableDragging();});// TODO: 触摸结束时触发次此事件  此时开启禁止拖动map.addEventListener("touchend", function (e) {map.disableDragging();});   // 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件map.disableDragging();// 添加自定义覆盖物var point1 = new BMap.Point(123.438973, 41.798756);var point2 = new BMap.Point(123.5094, 41.835744);var mySquare = new SquareOverlay(point1, '金地', '待定','250','1');map.addOverlay(mySquare);var mySquare = new SquareOverlay(point2, '万科', '3000元/㎡','250','1');map.addOverlay(mySquare);
</script>

以上就不会受到误触的困扰了，同时非常感谢大神们的指引；
本文主要是对于（连接：https://blog.csdn.net/Davis_Dxs/article/details/82425211 ）的一个应用吧，希望对涉及地图的朋友提供些帮助

百度地图自定义覆盖物，在手机上无法监听click事件相关推荐

android百度地图自定义覆盖物,Android 百度地图在地图上添加覆盖物（头像）
通过百度地图或者高德地图的demo可以看到有在地图上加载覆盖物的代码,但是加载的都是相同的覆盖物.如果加载不同的人物头像,而且一次加载很多的话,能不能实现呢.确实有这样的需求. 先看看效果图吧. im ...
百度地图自定义覆盖物
1.覆盖物函数百度地图本身就有自己的图标,在开发过程中我们有时候需要自定义地图上显示的坐标图标,我们可以用图片来代替百度地图本身的这些图标,这样我们就可以跟进需求定制我们想要的效果. iconPat ...
百度地图自定义覆盖物工具栏，修改标识图标
drawingManager工具栏 drawingModes设置工具栏模式直接上效果代码 <!DOCTYPE html> <html> <head><met ...
百度地图自定义覆盖物自定义字体图标动态修改图标颜色
实现效果: 图标用的是字体图标,为了方便动态改变颜色关键代码 function ComplexCustomOverlay(params) {let defaultParams = {point: { ...
百度地图创建多个marker和监听事件
先说说我的问题吧.我的需求是,在地图上自动创建n个标记,每个点有对应的ID,Lon,Lat,当点击指定标记弹出对应标记的信息,监听事件是一样的,但弹出来的信息要根据对应的标记来显示. 一开始我是这样写 ...
Echarts:重写toolbox的还原工具并监听click事件
Echarts中的toolbox.feature提供了部分图标,比如 saveAsImage 保存图片 restore 配置项还原 dataView 数据视图工具,可以展现当前图表所用的数据,编辑后可 ...
百度地图自定义覆盖物，随地图缩放、拖曳偏移解决办法
如图所示,需要在定义的元素上添加position: absolute属性
移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
百度地图自定义标点。
百度地图自定义标点. 多个标点方法可以进行for循环进行动态标点. <!DOCTYPE html> <html> <head><meta http-equ ...

百度地图自定义覆盖物，在手机上无法监听click事件

百度地图自定义覆盖物，在手机上无法监听click事件相关推荐

最新文章

热门文章