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作为一个变量，然后像普通函数一样使用。至于为什么能使之前的问题得到解决，我还得看看，也希望各位能给我些帮助。（效果图如下）

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

猜你喜欢