百度地图API中不同marker的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的闭包参考
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://blog.sina.com.cn/s/blog_484d87770101ekmx.html
相关推荐
zrtlin 2020-11-09
xuebingnan 2020-11-05
wikiwater 2020-10-27
heheeheh 2020-10-19
Crazyshark 2020-09-15
softwear 2020-08-21
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
jinxiutong 2020-07-26
lanzhusiyu 2020-07-19
Skyline 2020-07-04
xiaofanguan 2020-06-25
Aveiox 2020-06-23
dragonzht 2020-06-17