分享

百度地图API中不同marker的InfoWindow的显示内容不同的实现

 liuguichuan 2014-11-02
        这几天在写一个开发应用中,用到百度地图。功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出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数组里面最后一个数组的元素的相应信息百度地图API中不同marker的InfoWindow的显示内容不同的实现

    上网查了一下,没有人给出具体解决,只是提出了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;
};

运行后成功百度地图API中不同marker的InfoWindow的显示内容不同的实现

关于js的闭包参考

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约