Openlayers 标记点击多个标记上的事件
Openlayers markers click events on multiple markers
我正在动态加载多个标记并将它们添加到标记层。问题是当我点击任何标记时,相同的弹出窗口出现在最后添加的标记上。
var markers = new OpenLayers.Layer.Markers("Markers");
for(var i = 0; i < listd.length; i++)
{
var lonLat = new OpenLayers.LonLat(listd[i].Longitude, listd[i].Latitude);
var title = listd[i].Title;
var iconPath = listd[i].IconPath;
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon(iconPath, size, offset);
var marker = new OpenLayers.Marker(lonLat, icon.clone());
markers.addMarker(marker);
marker.events.register("click", marker, function(e){
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
new OpenLayers.Size(200, 200),
title,
null, false );
map.addPopup(popup);
});
}
map.addLayer(markers);
我错过了什么?
当你尝试这个时怎么样???
更新新
Gmap url 带有图标中的标签 :3:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=[标签]|[引脚颜色]|[标签颜色]
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000
更多信息:https://developers.google.com/chart/
更新
var markers = new OpenLayers.Layer.Markers("Markers");
for(var i = 0; i < listd.length; i++)
{
(function(i){
var lonLat = new OpenLayers.LonLat(listd[i].Longitude, listd[i].Latitude);
var title = listd[i].Title;
var iconPath = listd[i].IconPath;
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon(iconPath, size, offset);
var marker = new OpenLayers.Marker(lonLat, icon.clone());
markers.addMarker(marker);
marker.events.register("click", marker, function(e){
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
new OpenLayers.Size(200, 200),
title,
null, false );
map.addPopup(popup);
});
})(i);
}
map.addLayer(markers);
我正在动态加载多个标记并将它们添加到标记层。问题是当我点击任何标记时,相同的弹出窗口出现在最后添加的标记上。
var markers = new OpenLayers.Layer.Markers("Markers");
for(var i = 0; i < listd.length; i++)
{
var lonLat = new OpenLayers.LonLat(listd[i].Longitude, listd[i].Latitude);
var title = listd[i].Title;
var iconPath = listd[i].IconPath;
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon(iconPath, size, offset);
var marker = new OpenLayers.Marker(lonLat, icon.clone());
markers.addMarker(marker);
marker.events.register("click", marker, function(e){
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
new OpenLayers.Size(200, 200),
title,
null, false );
map.addPopup(popup);
});
}
map.addLayer(markers);
我错过了什么?
当你尝试这个时怎么样??? 更新新 Gmap url 带有图标中的标签 :3: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=[标签]|[引脚颜色]|[标签颜色]
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000
更多信息:https://developers.google.com/chart/
更新
var markers = new OpenLayers.Layer.Markers("Markers");
for(var i = 0; i < listd.length; i++)
{
(function(i){
var lonLat = new OpenLayers.LonLat(listd[i].Longitude, listd[i].Latitude);
var title = listd[i].Title;
var iconPath = listd[i].IconPath;
var size = new OpenLayers.Size(15, 22);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon(iconPath, size, offset);
var marker = new OpenLayers.Marker(lonLat, icon.clone());
markers.addMarker(marker);
marker.events.register("click", marker, function(e){
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
new OpenLayers.Size(200, 200),
title,
null, false );
map.addPopup(popup);
});
})(i);
}
map.addLayer(markers);