Saltar al contenido

Cómo convertir de coordenadas de pantalla (x, y) a LatLng (Google Maps)

Te damos la bienvenida a nuestro espacio, en este lugar vas a hallar la respuesta que buscabas.

Solución:

function latLng2Point(latLng, map) 
  var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());
  var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
  return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);


function point2LatLng(point, map) 
  var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());
  var worldPoint = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y);
  return map.getProjection().fromPointToLatLng(worldPoint);

Después de algunas investigaciones y algunos errores, se me ocurrió una solución. Siguiendo la documentación de este enlace, descubrí que los puntos de Google se calculan en el rango de x:[0-256]y:[0-256] (un mosaico de 256×256 píxeles) y el punto (0,0) es el punto más a la izquierda del mapa (consulte el enlace para obtener más información).

Sin embargo, mi enfoque es el siguiente:

  • teniendo las coordenadas x e y (que son coordenadas en la pantalla – en el mapa) calculé el porcentaje donde se colocaron las coordenadas x e y en respuesta al div que contiene el mapa (en mi caso, la ventana del agujero)

  • calculó los límites de LatLng Noreste y Suroeste del mapa (visible)

  • convirtió los límites en google Points

  • calculó la nueva latitud y longitud, en puntos de Google, con la ayuda de los límites y el porcentaje de x e y

  • convertido de nuevo a lat lng

      // retrieve the lat lng for the far extremities of the (visible) map
      var latLngBounds = map.getBounds();
      var neBound = latLngBounds.getNorthEast();
      var swBound = latLngBounds.getSouthWest();
    
      // convert the bounds in pixels
      var neBoundInPx = map.getProjection().fromLatLngToPoint(neBound);
      var swBoundInPx = map.getProjection().fromLatLngToPoint(swBound);
    
      // compute the percent of x and y coordinates related to the div containing the map; in my case the screen
      var procX = x/window.innerWidth;
      var procY = y/window.innerHeight;
    
      // compute new coordinates in pixels for lat and lng;
      // for lng : subtract from the right edge of the container the left edge, 
      // multiply it by the percentage where the x coordinate was on the screen
      // related to the container in which the map is placed and add back the left boundary
      // you should now have the Lng coordinate in pixels
      // do the same for lat
      var newLngInPx = (neBoundInPx.x - swBoundInPx.x) * procX + swBoundInPx.x;
      var newLatInPx = (swBoundInPx.y - neBoundInPx.y) * procY + neBoundInPx.y;
    
      // convert from google point in lat lng and have fun :)
      var newLatLng = map.getProjection().fromPointToLatLng(new google.maps.Point(newLngInPx, newLatInPx));
    

¡Espero que esta solución también ayude a alguien! 🙂

Mira la solución fácil (v3):

map.getProjection().fromLatLngToPoint(marker.position);

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Projection

Comentarios y puntuaciones

Eres capaz de defender nuestra tarea añadiendo un comentario o dejando una puntuación te damos las gracias.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *