传单：如何将多个标记添加到 featureGroup

Question

我正在尝试做类似的事情：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);

Answer 1

编辑：你想做的是由同一个 github project of IvanSanchez. Please read demo.html 而不是 demo-group.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 (here) 上创建了一个工作示例。

传单：如何将多个标记添加到 featureGroup

Leaflet: How to add multiple markers onto featureGroup

javascript

markers

leaflet