Generando lineas geodésicas en Google Maps

12/Dic/2007 Google , , 11 Comentarios

Una línea de geodésica es la línea de menor longitud entre dos puntos dados. Podríamos hablar de la distancia menor entre dos puntos terrestres.

Y es que si vemos un mapa del mundo aplanado, la distancia más corta entre dos puntos no es una linea recta, sino que será la línea geodésica.

En el artículo base de este original, el autor habla de un viaje Londres-San Francisco, en el cual la ruta que se sigue no es la línea recta que atravesaría todo Estados Unidos, sino que el avión sube hasta Groelandia y entra por la frontera de Canada, siguiendo la línea geodésica.

Si alguna vez voláis desde Europa a la costa oeste de los Estados Unidos (San Francisco, Seattle,...) podréis comprobar esta ruta y si tenéis suerte, disfrutar de unos bellos paisajes. Pero volvamos al código, que nos desviamos.

Google Maps, nos permite el trazar una línea geodésica entre dos puntos dados. Para ello nos apoyaremos en la clase GPolyline. La misma que nos sirve para crear un polígono definiendo sus vertices mediante longitudes-latitudes.

La estructura general de GPolyline es la siguiente:

GPolyline(latlngs,  color?,  weight?,  opacity?,  opts?)

Los parámetros son los siguientes:

  • latlngs, es un array de longitudes-latitudes. Las cuales representamos ayudándonos de la clase GLatLng.
  • color?, es el color de la línea que dibujará el polígono. La interrogación demarca su opcionalidad.
  • weight?, el ancho de la línea en pixeles.
  • opacity?, opacidad de la línea. Que se indicara con un valor entre 0 y 1.
  • opts?, las opciones del polígono. Para nuestro ejemplo el campo más importante.

Decimos que el parámetro opts es el más importante, ya que dentro de las opciones que se le pueden pasar a la clase GPolyline, una de ellas es geodesic. Esta propiedad indicará si la línea a pintar es una línea geodésica, valor true o línea normal, valor false.

A si que lo primero definimos esta propiedad.

var lineageodesica={geodesic:true};
var linearecta={geodesic:false};

Ahora inicializamos la clase GPolyline:

var geodesica = new GPolyline([
      new GLatLng(51.5002, -0.1262),  // Londres
      new GLatLng(47.6801, -122.3300)  // Seattle
], "#ff0000", 5, 0.7, lineageodesica);

Y solo nos quedará añadirla al mapa que hayamos cargado:

map.addOverlay(geodesica);

Ya tendremos cargada la línea geodésica en el mapa.

Una cosa interesante es que la clase GPolyline, nos devuelve la distancia entre los dos puntos con el método .getLength(). Así podremos saber la distancia entre los dos puntos marcados.

Visualizar el ejemplo | Descargar el código

Vía: Programa con Google.

11 comentarios en “Generando lineas geodésicas en Google Maps”

Víctor Cuervo

Erik

Catalina, mi correo es erikpereyra@hotmail.com, ojala me puedas ayudar enviandome tu codigo.

Víctor Cuervo

Erik

Hola Catalina, estuve viendo tu ejemplo y es lo mismo que quiero hacer yo, tengo en una BD los datos de las cooredenadas y quiero trazar la linea y ver como va avanzando punto por punto. Serias tan amable de enviarme tu codigo completo, me ayudaria mucho

Te lo agradezco

Víctor Cuervo

randy

hola

Víctor Cuervo

Maria

Hola, alguien seria tan amable de resolverme esta duda?
Estoy haciendo un algoritmo para optimizar el calculo de rutas que hace el google maps y mi problema es qe no consigo guardar los metros entre dos puntos de una ruta dada.
Teniendo la ruta que quiero optimizar en un array(llamado array) lo que quiero es calcular el coste(metros) de cada punto por separado:
for (i=0;i<long;i++)
{
for (j=0;j<long;j++)
{
arrayAux.push(array[i]);
arrayAux.push(array[j]);
gdir.loadFromWaypoints(arrayAux);

var dist=gdir.getDistance();

var metros = dist.metros;

valorCoste[i][j]=metros;

Pero no me funciona por algo de los eventos de gDirection() alguien podria echarme un mano?
Gracias.

Víctor Cuervo

Manuel

Catalina m’alegro de que resolvieras!
un placer por la parte que me toca.

bye

Víctor Cuervo

Catalina

Listooo

Gracias Manuel, hice lo siguiente:

function trazarRuta( dataBuff )
{
var pArray = new Array();

M=dataBuff[iGlbl].split(“\r”);
pGlbl[iGlbl]=new GLatLng(M[LATRUTA],M[LONRUTA]);
pArray[0] = pGlbl[iGlbl-1];
pArray[1] = pGlbl[iGlbl];

setTimeout(“trazarRuta(dataBuff)”,100);

if(iGlbl>0)
{
var polyline = new GPolyline(pArray, “#FF0000”, 4)
mapgGlbl.addOverlay(polyline);
}
iGlbl++;
}

Ahi sqque ideas tuyas y mias…gracias!!!

Víctor Cuervo

Catalina

emmm…. si, si lo tenia en mi codigo, pero si te das cuenta, funciona, traza la ruta pero la sobreescribe.
En el caso de ejemplo tuyo…. yo obtengo los datos de una bd con las latitudes y longitudes… y no me pasa, no funciona…

Seguiré intentando

Gracias por tu ayuda….

Víctor Cuervo

Catalina

Ok, veamos si funciona….gracias

Víctor Cuervo

Manuel

De hecho sí hay al menos un error:

setTimeout(”trazarRuta”,100);

debería de ser:

setTimeout(”trazarRuta()”,100);

pero por lo demás, yo lo acabo de hacer y funciona OK

Víctor Cuervo

Manuel

Hola Catalina, yo hago algo parecido pero sin temporizador:

//Tengo las coords en un array bidimensional
var listaCoords = [[1,2],[3,4],[5,6]];

//Obtengo un array de GLatLng’s
for(var i in listaCoords) {
listaCoords[i] = new GLatLng(
listaCoords[i][0],
listaCoords[i][1]
);
}
//Luego recorro el array de GLatLng’s (listaCoords)
for(var i in listaCoords) {
//Y creo una polyline entre el punto actual y el anterior
//pero cuando exista uno anterior(o sea, cuando tengo índice>0)
if(i>0) {
elMapa.addOverlay(
new GPolyline(
[listaCoords[i-1],
listaCoords[i]],
“#ffdd00″,6)
);
}
}

*****************************************************************
Y esto no lo he probado y es posible que tenga errores pero podría funcionar o darte ideas para hacerlo con setTimeout:

var listaCoords = [[1,2],[3,4],[5,6]];
for(var i in listaCoords) {
listaCoords[i] = new GLatLng(
listaCoords[i][0],
listaCoords[i][1]
);
}
var punto1 = listaCoords[0];
var punto2 = listaCoords[1];
var ultimo = 1;

function trazarRuta() {
elMapa.addOverlay(
new GPolyline([punto1,punto2],”#ff0000”,4)
);
punto1 = listaCoords[ultimo];
punto2 = listaCoords[++ultimo];
setTimeout(“trazarRuta”,100);
}
trazarRuta();

Víctor Cuervo

Catalina

Tengo una duda, trabajo con google maps y he hecho de todo, lo que me falta es trazar la linea pero por puntos.
Me explico. Tengo ya la linea, pero quiero que no se marque una linea inmediata, necesito que se marque coordenada por coordenada, así se ve cuanto avanza el vehículo. Eso lo logre, hice una función y le puse setTimeout(“trazarRuta()”,100);, pero la sobreescribe, osea marca la linea 1, luego la linea 1 (nuevamente) y la linea 2, luego la linea 1, linea 2 y linea 3..etc…

Alguien sabe como hacer para que no se sobreescriba.

var iGlbl =0;
function trazarRuta( dataBuff )
{
M=dataBuff[iGlbl].split(“\r”);
pGlbl[iGlbl]=new GLatLng(M[LATRUTA],M[LONRUTA]);

setTimeout(“trazarRuta(dataBuff)”,100);

var polyline = new GPolyline(pGlbl, “#FF0000″, 4);

mapgGlbl.addOverlay(polyline);

iGlbl++;
//if (dataBuff==””) alert (“Pasamos”);

}

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*