如何使用OpenLayers创建一个单击的链接中心并在地图上显示一个弹出窗口？

Question

我已经从GeoDjango返回的geojson中将要素绘制到地图上。 我现在想单独显示这些功能的列表。 如果单击一个，则地图将以该特定点为中心，并显示包含一些详细信息的弹出窗口。 一个很好的例子是GoogleMaps，在那边您有一个地点列表，单击其中任何一个都会在地图上显示与该特定地点相对应的弹出窗口。

这篇文章建议一个人应该创建一个eventListener，所以我已经尝试过了但是没有用： 链接

我不确定如何将这些组件捆绑在一起。 单击链接后，以下代码将不执行任何操作。 href也令人困惑，因为它检查我的视图是否为url模式，因此我将void（0）避免出现这种情况。

<div id="place-list"></div>
<div id="map"></div>

// ... code that reads a geoJSON and outputs features
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(vectorLayer);
vectorLayer.addFeatures(features);

// Build the clickable list of features
var list = "";
for (var i=0, len=features.length; i  len; i++) {
        // This does not work?
        list = list + "<a href=\"javascript:void(0);\""+"onclick=\"selectFeature("+i+");\">"+features[i].attributes["address"]+"</a><br/>";
}

    $("#place-list").append(list);  

    var info;
    function selectFeature(i) {
        feature = features[i];
        info = new OpenLayers.Control.SelectFeature(
            vectorLayer, 
            {
                eventListeners: {
                    getfeaturesinfo: function(event) {
                        map.addPopup(new OpenLayers.Popup.FramedCloud(
                            feature.id,
                            feature.lonlat,
                            null,
                            event.text,
                            null,
                            true
                        ));
                    }
                }
            }
        );

    }
    map.addControl(info);
    info.activate();

Answer 1

我能够找出我的问题。 我必须创建一个OpenLayers.Control.Panel来保存我的链接，然后将其添加到我的地图中。 对于每个功能对象，我创建了一个事件侦听器并将其链接到其ID。

这是一个很好的示例： OpenLayers Eventhandler示例 ！