Actualmente tengo un pequeño proyecto que necesita hacer que el marcador sea estático y mover el mapa a la visualización del marcador en el mapa. Espero que tenga algún sentido.
cómo mover el mapa, no el marcador; como dije, el marcador no se puede mover, pero el mapa debe moverse hacia el marcador cuando cambia la ubicación; también se muestra el marcador en la parte inferior del mapa para dejar espacio para otros eventos sobre el marcador, como una visualización de ruta y etc -
lo que ya se hizo es cuando el automóvil se mueve, mira el gps, luego le dice al marcador que se mueva a ese gps como una ubicación actual y luego se desplaza hacia la parte inferior del mapa, esto hace que el marcador se mueva en la parte inferior del mapa cuando su ubicación cambió, así que yo Pensé que si mantengo el marcador estático colocándolo en un div sobre el mapa y fijándolo a través del estilo css, para que permanezca en el mismo lugar todo el tiempo, pero esto es incorrecto ya que no se puede mover con el mapa, entonces cuando alguien arrastra el mapa con un dedo, por lo que esta no puede ser la solución correcta, ¿cuál es su solución a este dilema a menos que me esté perdiendo algo?
Para lograr lo que desea, debe rotar el mapa en el eje correcto, encontrar la posición del centro del mapa y, finalmente, centrar el mapa en el lugar correcto.
En su caso (supongo que desea que el automóvil siempre esté frente a la carretera frente a la posición del usuario), debe rotar el mapa antes de centrarlo; de lo contrario, el mapa siempre está orientado hacia el norte y puede ser molesto cuando el automóvil se mueve. otra orientación (sur por ejemplo). En este caso, el punto de vista está orientado en la dirección incorrecta y el usuario no ve la carretera que se aproxima.
Puede encontrar un ejemplo aquí en la documentación. Básicamente necesitas usar el método setHeading() . La rotación en gmap no es fácil de lo que puede ser (ver esta publicación ).
Para encontrar la posición actualizada del centro de su mapa, debe recuperar la ubicación de latitud y longitud de un punto siempre a la misma distancia (en píxeles del contenedor del mapa) por encima de la ubicación fija de su marcador. Utilice los métodos fromLatLngToPoint() y fromPointToLatLng() para recuperar la posición del mapa al mundo real o viceversa (consulte getProjection() para obtener más detalles).
Ejemplo:
Su mapa se muestra en 1000*1000 px y la posición inferior del marcador que elija está a 500 px del lado izquierdo y 950 px del lado superior. Si desea mover el centro del mapa sin cambiar la posición del marcador, debe encontrar la posición latLng del punto a 450 px por encima de su marcador.
function findMapCenter(map, markerLatLng) { // need this to adjust from the actual zoom on the map let scale = Math.pow(2, map.getZoom()); // position in pixel xy from the container let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng); // calcul of the position of the center let centerWorldCoordinate = new google.maps.Point( markerWorldCoordinate.x, markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker ); // return latLng of the center point of the map return map.getProjection().fromPointToLatLng(centerWorldCoordinate); } Use el método setCenter() para centrar el mapa en una ubicación latLng elegida.
let marker; // = config of your marker let gMap = new google.maps.Map(document.getElementById('map')); update({lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE}); // call this every time you want to update function update(markerNewLatLng){ // ... first step : rotate the map if you need to // then update marker position marker.setPosition(markerNewLatLng); // center the map gMap.setCenter(findMapCenter(gmap, markerNewLatLng)); }