如何在路线上设置自定义Leaflet标记的动画?

时间:2017-03-23 12:29:44

标签: javascript maps leaflet

我对传单非常陌生,我希望有人可以帮助我。 我想要做的是在地图上添加两个标记,然后按照路线制作另一个标记。

我找到了一些有用的插件,但是这些插件会让你的标记在地图上而不是按照特定的路线。 http://ewoken.github.io/Leaflet.MovingMarker/

我知道它是如何在谷歌地图中完成的,但不是在传单中。 https://www.youtube.com/watch?v=zbr-F9wVqgU

1 个答案:

答案 0 :(得分:1)

你很亲密。您选择了Leaflet插件并且有一个非常精确的目标。 您只需按照here解释的内容即可。

让我们实现:

// here is the path (get it from where you want)
var coordinateArray = [ [0,1], [1,1], [1,0] ];
// or for example
var coordinateArray = existingPolyline.getLatLngs();
// here is the line you draw (if you want to see the animated marker path on the map)
var myPolyline = L.polyline(coordinateArray);
myPolyline.addTo(map);
// i don't know if i understood your question correctly
// if you want to put a marker at the beginning and at the end of the path :
var mstart = L.marker(coordinateArray[0]).addTo(map);
var mend = L.marker(coordinateArray[coordinateArray.length - 1]).addTo(map);
// here is the moving marker (6 seconds animation)
var myMovingMarker = L.Marker.movingMarker(coordinateArray, 6000, {
    autostart: false
});
map.addLayer(myMovingMarker);
myMovingMarker.start();