百度地图自定义覆盖物点击事件在移动界面后点击事件会消失的问题

百度地图自定义覆盖物点击事件在移动界面后点击事件会消失的问题

最近用到了百度地图,使用了自定义覆盖物后,出现了问题,就是界面首次加载时,点击事件可以用,但是移动地图后就失效了,在看了官方的类参考之后,发现了原因
在这里插入图片描述
只要实现了这个方法,在方法里面重新添加事件就可以了

//自定义覆盖物
	ComplexCustomOverlay.prototype.initialize = function(map) {
		this._map = map; // 保存map对象实例  
		//创建一个父盒子
		var div = this._div = document.createElement("div"); //创建一个盒子节点
		div.style.position = "absolute";
		div.style.boxSizing = "content-box" //内外边距不向内塌陷
		div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
		div.style.backgroundColor = "#fff";
		div.style.border = "1px solid #000";
		div.style.color = "white";
		div.style.height = "45px";
		div.style.whiteSpace = "nowrap";
		div.style.MozUserSelect = "none";
		div.style.fontSize = "12px"

		//头部信息条
		var boxHead = this._boxHead = document.createElement("div");
		boxHead.style.position = "absolute";
		boxHead.style.boxSizing = "content-box" //内外边距不向内塌陷
		boxHead.style.backgroundColor = "#2877AF";
		boxHead.style.height = "20px";
		boxHead.style.padding = "2px"
		boxHead.style.top = "-27px";
		boxHead.style.lineHeight = "20px"; //以实现文字居中
		boxHead.style.marginLeft = "50%";
		boxHead.style.transform = "translateX(-50%)";
		boxHead.style.borderRadius = "3px"; //圆角边框
		div.appendChild(boxHead);

		//头部信息条内容
		var span = this._span = document.createElement("span"); //创建一个文本节点
		boxHead.appendChild(span);
		span.appendChild(document.createTextNode(this._text)); //创建一个文本节点

		var that = this;

		//插入图片
		var img = this._img = document.createElement("img");
		img.src = "img/1.png";
		img.style.height = "40px";
		div.appendChild(img);

		//红色倒三角图标
		var arrow = this._arrow = document.createElement("div");
		arrow.style.background = "url(img/label.png) no-repeat";
		arrow.style.position = "absolute";
		arrow.style.width = "11px";
		arrow.style.height = "10px";
		arrow.style.top = "45px";
		arrow.style.left = "10px";
		div.appendChild(arrow);

		map.getPanes().labelPane.appendChild(div); // 将div添加到覆盖物容器中

		this._div = div; // 保存div实例
		return div;
	}


//给覆盖物定位
	ComplexCustomOverlay.prototype.draw = function() {
		var map = this._map;
		var pixel = map.pointToOverlayPixel(this._point); //根据地理坐标获取对应的覆盖物容器的坐标,此方法用于自定义覆盖物
		this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
		this._div.style.top = pixel.y - 57 + "px";

		//每当视图移动时,点位将会刷新,所以需要重新添加事件
		myCompOverlay1.addEventListener('click', function() {
			map.openInfoWindow(infoWindow, point); // 开启信息窗口
		});
	}

//创建点标记
	var txt1 = "1111";
	var myCompOverlay1 = new ComplexCustomOverlay(new BMap.Point(117.714328, 50.112275), txt1);
	//添加点标记
	map.addOverlay(myCompOverlay1);

//点击事件
	ComplexCustomOverlay.prototype.addEventListener = function(event, fun) {
		this._div['on' + event] = fun;
	}

var sContent =
		`	
				<h4 style='margin:0 0 5px 0;'>
					巴拉巴拉巴拉
				</h4>
				<img style='float:right; width: 150px; height: 150px;' id='imgDemo' src='img/1.png' width='139' height='104'/>
			
				<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
					巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
				</p>
		`;
	var infoWindow = new BMap.InfoWindow(sContent);

// 添加点标记点击事件
	myCompOverlay1.addEventListener('click', function() {
		map.openInfoWindow(infoWindow, point); // 开启信息窗口
	});
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值