Буклет: Как добавить несколько маркеров в featureGroup

Я пытаюсь сделать что-то вроде: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/blob/master/demo-group.gif, где у меня есть несколько маркеров.

В примере кода https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/blob/master/demo-group.html каждое местоположение было добавлено вручную с помощью

     var trd = [63.5, 11],
        mad = [40.5, -3.5],
        lnd = [51.5, -0.5],
        ams = [52.3, 4.75],
        vlc = [39.5, -0.5];

     var route = L.featureGroup([
        L.marker(trd),
        L.polyline([trd, ams]),
        L.marker(ams),
        L.polyline([ams, lnd]),
        L.marker(lnd),
        L.polyline([lnd, mad]),
        L.marker(mad),
        L.polyline([mad, vlc]),
        L.marker(vlc)
    ]);

Мой вопрос: если у меня много маркеров (например, 500 маркеров), как я могу создать маршрут, не добавляя вручную каждый маркер и полилинию в L.featureGroup.

   var bounds = new L.LatLngBounds();
   for (var i = 0; i < mTool.length; i++) {
            var loc = new L.LatLng(mTool[i].lat, mTool[i].lon);
            bounds.extend(loc);
            var marker = new L.Marker(loc);
            map.addLayer(marker);
    }
    map.fitBounds(bounds);

javascript leaflet markers
person Tenz    schedule 10.10.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

РЕДАКТИРОВАТЬ: То, что вы хотите сделать, предоставляется тем же проектом github Ивана Санчеса. Пожалуйста, прочитайте demo.html вместо демо-группы. HTML

Это легко сделать, зациклившись на массиве маркеров, как вы правильно намекнули. Код может быть следующим:

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());

Я создал рабочий пример на gist (здесь).

person Philippe V.    schedule 10.10.2016
comment
Мне интересно, может ли каждый маркер отображать свою всплывающую базу на полилинии, касающейся маркера. - person Tenz; 11.10.2016
comment
Да, просто поиграйте с параметром popupAnchor значка маркера. . - person IvanSanchez; 11.10.2016
comment
Спасибо, я слишком новичок в этом деле. ^^ - person Tenz; 11.10.2016
comment
Я пытаюсь сделать так: - person Tenz; 11.10.2016
comment
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 (маркер); route.addLayer(строка); }; route.addLayer (новый L.Marker (маркеры [n-1])); - person Tenz; 11.10.2016
comment
Я пытаюсь поместить код marker.bindPopup(POPUP).openPopup(); но всплывающее окно не открывается автоматически, когда работает змея. - person Tenz; 11.10.2016
comment
Вы можете себе представить нечто подобное (bl.ocks.org/phvaillant/f793c2519739134afb6ef69dd4e82091), но пожалуйста имейте в виду, что 1) кто-то задает точные вопросы о stackoverflow 2) сначала он пытался решить проблему сам и провел обширный поиск. Не публикуйте в том же stackoverflow, чтобы спросить о множестве дополнительных функций для вашего проекта. Ваши вопросы сильно отклонились от вашего первоначального вопроса. Тем не менее, запрос на поддержку всплывающих окон для плагина змеи — это отличный вопрос, и, возможно, Иван Санчес уже имел дело с этой проблемой и предложил обходной путь! - person Philippe V.; 12.10.2016