javascript - Openlayers 标记在多个标记上单击事件

Question

我正在动态加载多个标记并将它们添加到标记层。问题是，当我单击任何标记时，最后添加的标记上会出现相同的弹出窗口。

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);

我错过了什么？

Answer 1

当你尝试这个时怎么样？？？ 更新新内容 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);