如何使用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示例 ！