Листовка: автоматическое открытие всплывающего окна для каждого маркера

Я следую IvanSanchez's snakeIn, чтобы нарисовать каждый маркер после каждой ломаной линии.

Код был изменен, например

   var markers = [[63.5, 11],
    [40.5, -3.5],
    [51.5, -0.5],
    [52.3, 4.75],
    [39.5, -0.5]];

   var route = L.featureGroup().addTo(map);

   var n = markers.length;

   for (var i = 0; i < n-1; i++) {
        var marker = new L.Marker(markers[i]);
        var line = new L.polyline([markers[i],markers[i+1]]);
        route.addLayer(marker);
        route.addLayer(line);
    };
   route.addLayer(new L.Marker(markers[n-1]));

   map.fitBounds(route.getBounds());

Я пытался поиграть с всплывающим окном Leaflet, где я могу привязать всплывающее окно для каждого маркера. Мой вопрос в том, как я могу сделать так, чтобы каждое всплывающее окно автоматически открывалось, когда его маркер нарисован, затем оно автоматически закрывалось, когда рисовался следующий маркер, и так далее ...


javascript leaflet popup
person Tenz    schedule 12.10.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В Leaflet каждый слой (включая маркеры) имеет add событие, которое срабатывает при добавлении на карту.

Внутренне код для Leaflet.Polyline.SnakeAnim удаляет и добавляет слои из LayerGroup при запуске змеящейся анимации; это означает, что вьющиеся слои вызовут событие add.

Кроме того, LayerGroup (или FeatureGroup), запускающая змеевидную анимацию, будет запускать событие snake каждый раз, когда вставляется новый слой. Обратите внимание, однако, что это событие не имеет ссылки на только что вставленный слой.

Так что-то вроде:

marker1.on('add', function(){
    // Open popup for marker 1
});

Вы также говорите:

тогда он автоматически закроется, когда будет нарисован следующий маркер,

Сначала прочтите документацию по L.Map.openPopup, а затем:

marker1.on('add', function(){
    map.openPopup( popupForMarker1 );
});
person IvanSanchez    schedule 12.10.2016
comment
--- ‹br/› var marker = new L.Marker (loc, {icon: allIcon}); marker.on ('добавить', функция () {map.openPopup (мой контент);}); var line = new L.polyline ([loc, nextLoc]); route.addLayer (маркер); route.addLayer (строка); ‹Br/› --- Кажется, не добавляет никаких других маркеров, но только первый маркер добавляется, а затем застревает там. Всплывающее окно также не появляется. - person Tenz; 12.10.2016
comment
Вы можете привести пример? У меня это действительно не работает, и функция SnakeIn остановилась. - person Tenz; 12.10.2016
comment
Это действительно не работает. Я пытался, как то, что вы сказали. Ни одно всплывающее окно не показывает, когда каждый маркер нарисован на змейке в функции. - person Tenz; 13.10.2016