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.

  • es.davy.ai/
  • Programación /
  • Crear una polilínea para mostrar en Google Maps horizontalmente y hacer zoom para centrarla en las coordenadas centrales.

Crear una polilínea para mostrar en Google Maps horizontalmente y hacer zoom para centrarla en las coordenadas centrales.

28 May, 2023 Programación

Estoy usando Google Maps API JavaScript. Mi caso de uso es que necesito trazar coordenadas (lat, lng) en mapas (crear marcadores) y unirlos a través de una polilínea. Las coordenadas estarán muy cerca entre sí, por lo que cuando intento trazarlas, se ocultan detrás del primer marcador. Por lo tanto, encuentro el centro e intento acercar los zooms para que todos los marcadores sean visibles en el mapa.

Usé límites para encontrar el centro pero no puedo hacer zoom para centrar la coordenada. Usé map.fitBounds (latlng); Se ajusta la coordenada en la pantalla. Pero lo que quiero lograr es hacer que la polilínea (conectando todas las coordenadas) siempre esté horizontal y hacer zoom para centrar la coordenada.

Como la coordenada siempre será diferente, la polilínea estará en cualquier dirección, pero siempre quiero mostrarla horizontalmente en el mapa.

Lo que obtengo:

enter image description here

Lo que quiero lograr:

enter image description here

Se apreciará cualquier sugerencia.

Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado, puedes calcular el ángulo de la polilínea y aplicar una rotación basada en ese ángulo al mapa. Aquí hay una posible solución:

    1. Calcula el ángulo de la polilínea usando las primeras y últimas coordenadas:
    var latLng1 = temp[0];
var latLng2 = temp[temp.length-1];

var angle = Math.atan2(latLng2.lng() - latLng1.lng(), latLng2.lat() - latLng1.lat()) * 180 / Math.PI;
    1. Aplica la rotación al mapa usando CSS transform:
    var mapContainer = document.getElementById("map-container");
mapContainer.style.transform = "rotate(" + angle + "deg)";

    Ten en cuenta que debes asignar un identificador a tu elemento contenedor del mapa para que esto funcione.

    Esto debería rotar el mapa para que la polilínea esté horizontal. Es posible que debas ajustar el nivel de zoom después para que todos los marcadores se ajusten en la pantalla.

Comments are closed.