GoogleMap 循环绑定图标点击事件的坑

本文讨论了在使用GoogleMap展示数据库中的坐标并利用Ajax请求获取对应详细信息时遇到的问题。通过将坐标事件绑定方法单独提出,成功解决了所有点击坐标显示相同信息的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 项目需要用到GoogleMap,循环从数据库中取坐标,然后点击坐标,根据坐标的ID以Ajax请求的方式获取坐标对应的详细信息,很容易得到如下代码:
success:function(data){
			for(var i = 0;i < data.length;i++){
				//alert(data[i].ENT_ID +"-"+data[i].LATITUDE+"-"+data[i].LONGITUDE+"-"+data[i].ENT_TYPE);
				// 坐标
			    lat = data[i].LATITUDE;
			    lng = data[i].LONGITUDE;
			    var myLatLng = new google.maps.LatLng(lat, lng); 
				// 加载坐标
			    var marker = new google.maps.Marker({
			        position: myLatLng,
			        map: map,
			        ent_id: data[i].ENT_ID,
			        ent_type: data[i].ENT_TYPE
			    });
			    // 绑定坐标事件
			    google.maps.event.addListener(marker, 'click', function () {
			    	alert(marker.ent_id+","+marker.ent_type);
			    });
			}
		}
  • 嗯,噩梦开始了,点击地图上的坐标,发现所有的alert都显示的是最后一个marker的值,调了一上午,放弃,刚刚调通了,解决方法如下:
/**
 * 绑定坐标事件
 * marker 坐标对象
 */
function bindingClick(marker) {
    google.maps.event.addListener(marker, 'click', function (event) {
    	viewItem(marker);
    });
};


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值