在使用百度地图的时候我们常常会碰到这样的需求:同时给多个Point进行标注并添加InfoWindow,或许我们会很快想到将多个Point类添加到一个List中,然后利用循环遍历的方式对所有的Point类添加InfoWindow。但事情似乎并不是我们想象那么简单,因为但我们一切工程就绪后会突然发现一个令人抓狂的问题,InfoWindow的内容全是一样的!!!而且都是最后一个Point的内容。这让我瞬间没辙了。但好在有xw老师的帮助,为我提供了js闭包的解决思路,经过专研,it‘s OK!源码奉上:
<script> var map=new BMap.Map("map-chart"); var point=new BMap.Point(104.06,30.67); map.centerAndZoom(point,11); map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); var url="./EntityServlet"; var addMarker = function(equipment){ //传递的是entities var realtime_point=equipment['realtime_point']; var realtime_location=equipment['realtime_point']['location']; //alert(realtime_location ); var strLng=realtime_location[0]; var strLat=realtime_location[1]; var point = new BMap.Point(strLng,strLat); var marker = new BMap.Marker(point); map.addOverlay(marker); var label = new window.BMap.Label(equipment['entity_name'], { offset: new window.BMap.Size(20, -10) }); marker.setLabel(label); var opts1= { width: 50, // 信息窗口宽度 height: 200, // 信息窗口高度 title: equipment['entity_name'] // 信息窗口标题 } var name=equipment["entity_name"]; //var state=equipment["equipment_state"]; var speed=realtime_point["speed"]; var direction_num=realtime_point["direction"]; var moment=equipment["modify_time"]; var direction; if(direction_num=0){direction="正北"} else if(0<direction_num<90){direction="东北"} else if(direction_num=90){direction="正东"} else if(90<direction_num<180){direction="东南"} else if(direction_num=180){direction="正南"} else if(180<direction_num<270){direction="西南"} else if(direction_num=270){direction="正西"} else{direction="西北"} //alert(name); var html ="<p><hr>"+ // "状态:"+state+"<br>"+ "速度:"+speed+"<br>"+ "方向:"+direction+"<br>"+ "时间:"+moment+"<br></p>"+ "<a href='javascript:getTotalDistance(\""+name+"\")'>查询里程</a>" //"<a href='javascript:getTotalDistance(\""+name+"\")'>查询里程</a>" //"<input type='button' value='轨迹回放' id='getTraceBtn' οnclick='GetDistanceServlet?entity='"+name+">" //"<input type='button' value='轨迹回放' id='getTraceBtn' οnclick='getTotalDistance(\'"+name+"\')'>" //alert(html); var infoWindow = new BMap.InfoWindow(html,opts1); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow);}); }; $(document).ready(function () { $.post(url, function (data) { //alert(data); var json = eval("(" + data + ")"); //alert("建立json对象成功!"); var equipmentList = json.entities; //equipmentList是一张对应的列表 /**************在地图上标注相应的点*********************/ for (var i = 0; i < equipmentList.length; i++) { addMarker(equipmentList[i]); } //alert("解析json对象成功!"); alert(result); }); }); function getTotalDistance(name) { //alert(name); $.get("GetDistanceServlet?entity_name="+name,function (data) { //alert(data); var json=eval("("+data+")"); alert(json['entity_name']+"的总里程为"+json['distance']/1000+"Km"); }); } //获取轨迹 </script> 我仅说说我的理解 这里将函数addMarker作为一个变量,然后像普通函数一样使用。至于为什么能使之前的问题得到解决,我还得看看,也希望各位能给我些帮助。(效果图如下)