Openlayers标记单击多个标记上的事件

时间:2015-05-08 15:21:32

标签: javascript popup openlayers markers

我正在动态加载多个标记并将它们添加到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);

我缺少什么?

1 个答案:

答案 0 :(得分:1)

当你试试这个怎么样? 更新新 带有图标标签的Gmap网址: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);