Как сделать центр ссылки по щелчку и показать всплывающее окно на карте с помощью OpenLayers?

Я нанес на карту объекты из геоджсона, возвращенного GeoDjango. Теперь я хочу отобразить список этих функций по отдельности. Если щелкнуть по одному из них, карта сосредоточится на этой конкретной точке и покажет всплывающее окно с некоторыми подробностями. Хорошим примером могут быть GoogleMaps, где сбоку у вас есть список мест, и нажатие на любое из них покажет всплывающее окно на карте, соответствующее этому конкретному месту.

В этом сообщении предлагается создать прослушиватель событий, поэтому я пробовал это, но безрезультатно: Ссылка

Я не уверен, как связать эти компоненты вместе. Приведенный ниже код ничего не делает после нажатия ссылки. 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();

django javascript openlayers geodjango
person sharkfin    schedule 12.05.2012    source источник
comment
Что вы имеете в виду под не работает? Не вызывает функцию? Или функция не делает ничего полезного? Вам нужно отлаживать JS, использовать firebug для firefox или веб-инспектор для браузеров webkit.   -  person ilvar    schedule 13.05.2012
comment
Я обнаружил, что функция никогда не вызывалась, потому что я где-то постоянно получал нули. Но позже я добавил обработчики событий OpenLayers и наконец получил то, что хотел!   -  person sharkfin    schedule 15.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я смог разобраться в своей проблеме. Мне пришлось создать OpenLayers.Control.Panel с моими ссылками, а затем добавить его на карту. Для каждого из объектов функций я создал и связал прослушиватель событий с каждым из них с его идентификатором.

И вот отличный пример того, как это делается: пример обработчика событий OpenLayers !

person sharkfin    schedule 15.05.2012