Tengo un mapa de folleto que se llena con marcadores cuando los dispositivos GPS PUBLICAN su latitud y longitud en intervalos aleatorios.
El problema es que tengo que arrastrar manualmente el mapa para seguir el marcador a medida que recibe actualizaciones y se mueve por el mapa.
Horas después y mucho esfuerzo de investigación:
Implementé una solución a medias usando un botón que se ajusta a la posición actual de los marcadores, pero nuevamente tengo que hacer clic en el botón cada vez que se mueve para mantener el marcador a la vista.
onclick="mymap.fitBounds(gotomarker1.getBounds());"¿Hay alguna manera de que pueda hacer clic en el marcador que luego mantendrá el marcador en el centro del mapa mientras recibe actualizaciones de latitud y registro y se mueve? *Idealmente, no un botón, ya que podría haber muchos marcadores y no me gustaría tener una página llena de botones.
Intenté aplicar una función on.click que repite el código gotomarker1 anterior, pero no puedo detenerlo una vez que comienza, esto es un problema ya que hay más de un marcador que podría querer seguir o no seguir (para aclarar, solo quiero para seguir un marcador a la vez).
la forma en que he resuelto un problema similar es almacenar el marcador que se sigue en una variable
onclick="selectedMarker = myMarker"Siempre que reciba actualizaciones de ubicación, simplemente enfoque el mapa en el marcador seleccionado
// update all locations // ... // focus selected marker mymap.fitBounds(selectedMarker.getBounds());La lógica de @Nejc Jaminiks en su respuesta me ayudó a resolver lo que tenía que hacer.
Cuando se crea un marcador, tengo este código adjunto al marcador en tiempo real:
.on('click', focus);Luego tengo una función para detectar cuándo se hace clic en el marcador y recorrer la configuración de la vista en el marcador hasta que se haga clic en el marcador (u otro marcador), luego dejará de seguirlo.
var focusenabled = true; interval = null; function focus(e) { if (focusenabled) { var i = 0; interval = setInterval(function () { mymap.setView(e.target.getLatLng()); console.log("focus active"); }, 2000); focusenabled = false; document.getElementById("footer").style.backgroundColor='red'; document.getElementById("footer").style.color='white'; } else { clearInterval(interval); document.getElementById("footer").style.backgroundColor='#222'; document.getElementById("footer").style.color='#222'; focusenabled = true; } };Uso el siguiente código para cambiar el div del pie de página a rojo y el texto a blanco cuando se sigue un marcador:
document.getElementById("footer").style.backgroundColor='red'; document.getElementById("footer").style.color='white';Y luego, cuando no se sigue un marcador, el div del pie de página vuelve al color de fondo que lo oculta de manera efectiva :)
document.getElementById("footer").style.backgroundColor='#222'; document.getElementById("footer").style.color='#222';