Estoy tratando de hacer un mapa que se desplace automáticamente a varias ubicaciones, una tras otra, utilizando el Folleto 1.7.1. Esto está funcionando bastante bien usando la función panTo() :
índice.html
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <style> html,body,#map { width: 100%; height: 100%; } </style> </head> <body> <div id='map'></div> </body> <script type='text/javascript' src='script.js'></script> </html>guión.js
var map = L.map('map'); var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); map.dragging.disable(); map.setView([48.980, 4.373], 7); var athens = [37.9844, 23.7398] var stockholm = [59.3272, 18.0830] setTimeout(function() { map.panTo([athens[0], athens[1]], { animate: true, duration: 20, easeLinearity: 0.9 }) }, 2000); setTimeout(function() { map.panTo([stockholm[0], stockholm[1]], { animate: true, duration: 15, easeLinearity: 0.9 }) }, 22000);Me gustaría agregar una función de pausa/reanudar, pero no sé cómo hacerlo. Puedo detener la animación usando el siguiente comando:
map.setView(map.getCenter(), map.getZoom(), {"animate": false});Pero no puedo reanudar la animación después, y los eventos panTo cronometrados posteriores ocurrirán de todos modos.
¿Alguna pista o idea sobre cómo lograrlo?