我正在尝试做类似的事情: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);
最佳答案
编辑:您想要做的事情是由相同的 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());
我在 gist ( here ) 上创建了一个工作示例。
关于javascript - Leaflet:如何将多个标记添加到 featureGroup 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39967302/