Как правильно в OpenLayers (OSM) вызывать всплывающее окно для функции? - PullRequest
Новая
       42

Как правильно в OpenLayers (OSM) вызывать всплывающее окно для функции?

3 голосов
/ 31 марта 2011

У меня есть идентификатор функции, я могу получить маркерный слой в загрузчике GeoRSS, но я все еще не уверен, как заставить программно появляться всплывающее окно.

Я создам всплывающее окно по требованию, еслиэто необходимо, но мне кажется, что я смогу получить идентификатор маркера, нарисованного на карте, и вызвать какое-то событие для этого.Я пытался использовать jQuery и вызывать событие $(marker-id).click() для элементов карты, но это, похоже, не работает.Чего мне не хватает?

Так как меня спросили о коде, и так как я предположил, что это шаблон, вот где я до сих пор: 

map = new OpenLayers.Map('myMap'); 
map.addLayer(new OpenLayers.Layer.OSM()); 
map.addLayer(new OpenLayers.Layer.GeoRSS(name,url));

//I've done some stuff as well in re: projections and centering and 
//setting extents, but those really don't pertain to this question.

В другом месте я немного сделалJQuery шаблонов и построил мне хороший список всех точек, которые отображаются на карте.Я знаю, как сделать обратный вызов из слоя loadend и получить объект слоя, я знаю, как извлечь свой слой из карты вручную, я знаю, как перебрать коллекцию слоев и найти мой слой.Так что я могу получить любую из этих деталей о всплывающем окне, но я все еще не знаю, как использовать встроенные методы DOM или этого API, чтобы сделать его столь же простым, как element.click(), что я и хотел быпредпочитаю делать.

Ответы [ 2 ]

4 голосов
/ 04 апреля 2011

Вам не нужно нажимать эту функцию, чтобы открыть всплывающее окно.

Сначала вам нужна ссылка на функцию из идентификатора функции. Я бы сделал это в событии loadend слоя GeoRSS, используя свойство markers в слое.

Если у вас есть ссылка на вашу функцию, я бы написал метод, который обрабатывает автоматическое всплывающее окно: 

var popups = {}; // to be able to handle them later 

function addPopup(feature) {

var text = getHtmlContent(feature); // handle the content in a separate function.

var popupId = evt.xy.x + "," + evt.xy.y; 
var popup = popups[popupId];
if (!popup || !popup.map) {
    popup = new OpenLayers.Popup.Anchored(
        popupId,
        feature.lonlat,
        null,
        " ",
        null,
        true,
        function(evt) {
            delete popups[this.id];
            this.hide();
            OpenLayers.Event.stop(evt);
        }
    );
    popup.autoSize = true;
    popup.useInlineStyles = false;
    popups[popupId] = popup;
    feature.layer.map.addPopup(popup, true);
}
popup.setContentHTML(popup.contentHTML + text);
popup.show();

}
1 голос
/ 04 ноября 2011

Между прочим, я наконец вернулся к этому и сделал что-то совершенно другое, но его ответ был хорошим. 

//I have a list of boxes that contain the information on the map (think google maps)
$('.paginatedItem').live('mouseenter', onFeatureSelected).live('mouseleave',onFeatureUnselected);

function onFeatureSelected(event) {
    // I stuff the lookup attribute (I'm lazy) into a global
    // a global, because there can be only one
    hoveredItem = $(this).attr('lookup');

    /* Do something here to indicate the onhover */
    // find the layer pagination id
    var feature = findFeatureById(hoveredItem);

    if (feature) {

        // use the pagination id to find the event, and then trigger the click for that event to show the popup
        // also, pass a null event, since we don't necessarily have one. 
        feature.marker.events.listeners.click[0].func.call(feature, event)
    }
}
function onFeatureUnselected(event) {
    /* Do something here to indicate the onhover */
    // find the layer pagination id
    var feature = findFeatureById(hoveredItem);

    if (feature) {

        // use the pagination id to find the event, and then trigger the click for that event to show the popup
        // also, pass a null event, since we don't necessarily have one. 
        feature.marker.events.listeners.click[0].func.call(feature, event)
    }

    /* Do something here to stop the indication of the onhover */

    hoveredItem = null;
}

function findFeatureById(featureId) {
    for (var key in map.layers) {
        var layer = map.layers[key];
        if (layer.hasOwnProperty('features')) {
            for (var key1 in layer.features) {
                var feature = layer.features[key1];
                if (feature.hasOwnProperty('id') && feature.id == featureId) {
                    return feature;
                }
            }
        }
    }
    return null;
}

также обратите внимание, что я сохраняю map как глобальный объект, поэтому мне не нужно повторно приобретать его каждый раз, когда я хочу его использовать

...