200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 百度地图自定义覆盖物 在手机上无法监听click事件

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

时间:2018-12-19 12:38:25

相关推荐

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

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

最近在做手机web端集成百度地图遇到了个坑儿;手机端不支持自定义覆盖物的click事件;

1.自带的marker是支持的(marker不属于自定义覆盖物)

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

2.引用百度开源库也可以

引入js:http://api./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./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>

以上就不会受到误触的困扰了,同时非常感谢大神们的指引;

本文主要是对于 (连接:/Davis_Dxs/article/details/82425211 )的一个应用吧,希望对涉及地图的朋友提供些帮助

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。