小册子：如何将多个标记添加到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提供什么。请阅读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()); 

我创建上要旨（here）的工作示例。