es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

En la API de Google Maps JavaScript, ¿cómo puedo mover el mapa y no el marcador?

27 Jul, 2023 Programación

Actualmente tengo un proyecto en el que necesito hacer que el marcador sea estático y mover el mapa hacia el marcador que se muestra en el mapa, espero que tenga sentido.

¿Cómo mover el mapa y no el marcador? Como dije, el marcador no puede moverse, pero el mapa necesita moverse hacia el marcador cuando cambia la ubicación. Además, el marcador se muestra en la parte inferior del mapa para dejar espacio para otros eventos encima del marcador, como la visualización de una ruta, entre otros.

Lo que ya se ha hecho es que cuando el automóvil se mueve, se sigue el GPS y luego se le indica al marcador que se mueva a esa ubicación actual y luego se mueve hacia la parte inferior del mapa. Esto hace que el marcador se mueva bruscamente en la parte inferior del mapa cuando cambia su ubicación. Entonces, pensé que si mantenía el marcador estático colocándolo en un div encima del mapa y lo fijaba mediante estilos CSS, se mantendría en el mismo lugar todo el tiempo. Pero esto está mal porque no se puede mover junto con el mapa cuando alguien arrastra el mapa con el dedo. Entonces, esta no puede ser la solución correcta. ¿Cuál es tu solución a este dilema a menos que me esté perdiendo algo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover el mapa manteniendo el marcador estático, puedes utilizar el método panTo del objeto google.maps.Map. Puedes llamar a este método cada vez que la ubicación GPS del coche cambie, pasando la nueva ubicación como argumento. Esto moverá el mapa para centrarse en la nueva ubicación mientras mantiene el marcador en la parte inferior del mapa.

    Aquí tienes un ejemplo de código:

    var map = new google.maps.Map(document.getElementById('map'), {
  // opciones del mapa
});

var marker = new google.maps.Marker({
  position: initialPosition,
  map: map,
  // opciones del marcador
});

function updateMarkerPosition(newPosition) {
  marker.setPosition(newPosition);
  map.panTo(newPosition);
}

// llama a esta función siempre que la ubicación GPS del coche cambie
updateMarkerPosition(newPosition);

    Ten en cuenta que necesitarás definir la variable initialPosition con la ubicación GPS inicial del coche y actualizarla cada vez que cambie la posición del coche.

Comments are closed.