最近在研究百度地图API的应用,试验了iOS SDK后又开始试验Web端的JS版应用,做到在地图上通过Ajax异步调用方式从后端取得数据后,添加标注并给标注添加对应的点击时间alert出此位置的信息时遇到了一个Javascript问题,最开始的code是这样写的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $.ajax({ type : "get" , url : urlStr, async : true , dataType : "json" , error : function () { alert( 'No valid location record!' ); }, success : function (json) { for ( var i=0;i<json.length;i++) { var point = new BMap.Point(json[i].longtitude, json[i].latitude); var marker = new BMap.Marker(point); // 创建标注 // 添加点击事件侦听 mark.addEventListener( "click" , function () { alert( '记录时间: ' +json[i].logTime+ ' 定位时间: ' +json[i].gpsTime); return ; }); map.addOverlay(marker); // 将标注添加到地图中 } var point = new BMap.Point(json[0].longtitude, json[0].latitude); map.centerAndZoom(point, 15); } }); |
这样运行时,点击任意一个标注后就会收到浏览器的js脚本错误,提示json[i].logTime还有后面同样的gpsTime部分有问题,检查了一下,发现Ajax请求成功后的函数内循环遍历数据时的i是局部变量,而每一个mark的click侦听函数内的i都为对同一个变量的引用,也就是说循环遍历后每次点击触发执行这段响应代码时的i都是同一个数,而不是认为的对应每一个mark时的i,也自然就取不到所期望的数据了!
Continue reading…