1. 程式人生 > >js的閉包解決百度地圖的資訊視窗問題

js的閉包解決百度地圖的資訊視窗問題

    在使用百度地圖的時候我們常常會碰到這樣的需求:同時給多個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' onclick='GetDistanceServlet?entity='"+name+">" //"<input type='button' value='軌跡回放' id='getTraceBtn' onclick='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作為一個變數,然後像普通函式一樣使用。至於為什麼能使之前的問題得到解決,我還得看看,也希望各位能給我些幫助。(效果圖如下)