存在多个marker时,点击第一个marker时,信息框出现在最后

1.当点击第一个marker的时候,信息框出现在最后一个marker上。



for (var i = 0; i < 5; i++) {
	var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例  
		icon: icon
	});
		mkr.addEventListener("click", function(){
			//这里用的是mkr
			mkr.openInfoWindow(new BMap.InfoWindow("一" + i, {
				width: 200,
				height: 0,
				title: "一" + i,
				enableMessage: false
			}));
		}); //在图标实例上添加鼠标点击事件  
	map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次   
} 


出现这个问题的原因是:

这5个marker身上注册的click事件其实都是最后一个的click事件。(原因看闭包)

所以,不管点击第几个marker,信息框都是在最后个marker上出现。

解决这个问题的方法是:

this.addEventListener("click", function(e){//将mkr改成this,表示每个click事件都是为当前图标注册的,避免了闭包原因让每个图标注册的都是最后个marker的click事件
    	searchInfoWindow.open(marker);
});



2.但是此方法仅仅解决了为何点击第一个marker时,信息框出现在最后个marker的情况。而每个信息框里的内容相同的情况并没有解决。


解决这个问题需要用到闭包机制:

for (var i = 0; i < 5; i++) {
	var mkr = new BMap.Marker(new BMap.Point(120.170507 + i / 20, 30.276462), {//创建一个图标实例  
		icon: icon
	});
	(function(x){
		mkr.addEventListener("click", function(){
			//这里用的是mkr
			this.openInfoWindow(new BMap.InfoWindow("一" + x, {
				width: 200,
				height: 0,
				title: "一" + x,
				enableMessage: false
			}));
		}); //在图标实例上添加鼠标点击事件  
	})(i);	
	map.addOverlay(mkr); //将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次   
}    



评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值