Листовка: Добавьте ссылку на маркеры

Довольно простой вопрос: как сделать маркеры карты в Leaflet интерактивными и перенаправить пользователя на другую страницу? У каждого маркера своя страница.

Я безуспешно пробовал следующее: каким-то образом все маркеры указывают на одну и ту же страницу, которая является последним назначенным URI.

var markers = [
    { coords: [51.505, -0.09], uri: '/some-page' },
    ...
];

for(x in markers)
{
    L.marker(markers[x].coords).on('click', function() {
        window.location = markers[x].uri;
    }).addTo(map);
}

Эта проблема действительно сводит меня с ума.


javascript maps leaflet
person Ivar    schedule 19.12.2012    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Хорошо, я наконец пришел к решению; когда маркер добавляется на карту, ему присваивается идентификатор, называемый "_leaflet_id". Его можно получить с помощью целевого объекта, а также установить пользовательское значение после добавления на карту.

Итак, окончательное решение просто:

var x = markers.length;

while(x--)
{
    L.marker(markers[x].coords).on('click', function(e) {
        window.location = markers[e.target._leaflet_id].uri;
    }).addTo(map)._leaflet_id = x;
}

(Я заменил цикл for-in на обратный цикл while)

person Ivar    schedule 19.12.2012
comment
Вы не должны использовать цикл for..in для перебора массивов. Кроме того, вы попадаете x в глобальную область видимости; используйте var. - person josh3736; 23.12.2012

arrow_upward
3
arrow_downward

Вы также можете использовать всплывающее окно, которое может отображать HTML

marker.bindPopup (htmlString);

person dnns    schedule 23.12.2012
comment
Верно, но тогда пользователь должен щелкнуть два раза вместо одного. - person Ivar; 24.12.2012
comment
Маркеры карты обычно не открывают новый URL-адрес, поэтому предпочтительнее использовать всплывающее окно. Вы можете запускать его автоматически, и он будет просто отображаться или при наведении курсора. Пользователь должен знать, что произойдет, когда он будет взаимодействовать с объектами, которые вы им даете, иначе вы разочаруете пользователей. - person knownasilya; 08.04.2013

arrow_upward
3
arrow_downward

Я нашел похожий код, который может вам помочь. вот ссылка jsfiddle http://jsfiddle.net/farhatabbas/qeJ78/

 $(document).ready(function () {
        init_map();
        add_marker();
    });
    var map;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
    }

    function add_marker() {
        var points = [
            ["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"],
            ["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"],
            ["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"]
        ];
        var marker = [];
        var i;
        for (i = 0; i < points.length; i++) {
            marker[i] = new L.Marker([points[i][1], points[i][2]], {
                win_url: points[i][3]
            });
            marker[i].addTo(map);
            marker[i].on('click', onClick);
        };
    }

    function onClick(e) {
        console.log(this.options.win_url);
        window.open(this.options.win_url);
    }
person Mou    schedule 18.08.2015