这几天在写一个开发应用中,用到百度地图。功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出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){
|