js的闭包解决百度地图的信息窗口问题

来源:互联网 发布:nginx整合php 编辑:程序博客网 时间:2024/06/01 09:49

    在使用百度地图的时候我们常常会碰到这样的需求:同时给多个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作为一个变量,然后像普通函数一样使用。至于为什么能使之前的问题得到解决,我还得看看,也希望各位能给我些帮助。(效果图如下)

0 0