百度地图InfoWindow循环显示不同的信息窗口

使用BMap.InfoWindow，在for循环展示信息的时候，总是显示最后一条信息的数据。

其实，可以将BMap.InfoWindow的创建写在一个单独的function中。这样，每一个BMap.InfoWindow，就是显示的当条的信息。

  这几天在写一个开发应用中，用到百度地图。功能要求将一批标记点加入地图，点击其中任意一个点，地图弹出InfoWindow框，里面显示与此点相关的内容。
按照常规写了如下代码:

var node = function(){
    name;
    lng;
    lat;
};

addmarks = function(nodes){
        var _nodes = nodes;
        var _markers = new Array();
        for(var i=0;i<_nodes.length;i++){
            var _marker = new BMap.Marker(new BMap.Point(_nodes[i].lng, _nodes[i].lat));
            var _node = _nodes[i];
            var _html = "节点名:"+_node.name;
            _marker.addEventListener("click", function(e){
                    this.openInfoWindow(new BMap.InfoWindow(_html));
            });
            _marker.addEventListener("mouseover", function(e){ 
                this.setTitle("坐标@ "+_node.lng+","+_node.lat);
            });
            _markers.push(_marker);
        }
      myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:_markers});
      myClusterer.setMaxZoom(17);
      //myClusterer.setStyles(myStyles);
};

      上述写法很直观看起来没有问题，但遗憾的是，运行起来后，各个标记点虽然能够根据各自的坐标散布在地图上，但点击每个标记点所弹出的InfoWindow框里的信息则是nodes数组里面最后一个数组的元素的相应信息 。

      上网查了一下，没有人给出具体解决，只是提出了javascript的闭包来解决。

于是采用闭包方式重新写了代码：

addmarks = function(nodes){
      var _nodes = nodes;
      var _markers = new Array();
      for(var i=0;i<_nodes.length;i++){
          var _html = "节点名:"+_node.name;
          shop_markers.push(createMark(_nodes[i], _html));
      }
      myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:shop_markers});
      myClusterer.setMaxZoom(17);
      //myClusterer.setStyles(myStyles);
};
   
createMark = function(node, info_html){
        var _marker = new BMap.Marker(new BMap.Point(node.lng, node.lat));
        _marker.addEventListener("click", function(e){
            this.openInfoWindow(new BMap.InfoWindow(info_html));
        });
        _marker.addEventListener("mouseover", function(e){ 
            this.setTitle("位于: "+node.lng+","+node.lat);
        });
        return _marker;
};

运行后成功 。

关于js的闭包 参 考

闭包的参考:

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

或者 :

addmarks = function(nodes){
      var _nodes = nodes;
      var _markers = new Array();
      for(var i=0;i<_nodes.length;i++){
function(x){
          var _html = "节点名:"+_node.name;
          shop_markers.push(createMark(_nodes[i], _html));
      }
      myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:shop_markers});
      myClusterer.setMaxZoom(17);
      //myClusterer.setStyles(myStyles);
}(i);
};