Ver Mensaje Individual
  #6 (permalink)  
Antiguo 23/07/2011, 17:53
Avatar de perryjr
perryjr
 
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 13 años, 9 meses
Puntos: 27
Respuesta: Mapa al estilo Google

Es verdad que no es un código para principiantes, nunca dije que era fácil, pero estoy dispuesto a explicarte todo lo que tu quieras preguntar. El código crea un objecto (llamado mbTypeOptions) para guardar las opciones del mapa. Dentro de ese objeto crea una función (en realidad el concepto es muy parecido al de «clase» en Java o C++):
Código Javascript:
Ver original
  1. getTileUrl: function(coord, zoom) {
  2.       var nc = getNormalizedCoord(coord, zoom);
  3.       if (nc == null) {
  4.         return '';
  5.       }
  6.       var url = '/tiles?z=' + zoom + '&x=' + nc.x + '&y=' + nc.y;
  7.       if ({{InProd}}) {
  8.         // Shard across multiple domains so that browsers that are limited in
  9.         // the number of in-flight requests per domain will load more quickly.
  10.         // Compute the shard deterministically to be cache-friendly.
  11.         var i = (nc.x + (2 * nc.y)) % 4;
  12.         url = 'http://' + i + '.' + document.location.host + url;
  13.       }
  14.       return url;
  15.     },

De aquí la parte interesante es esto:

var url = '/tiles?z=' + zoom + '&x=' + nc.x + '&y=' + nc.y;

el resto es un truquito para que el navegador lance mas respuestas paralelas al servidor y vaya más rápido ("shard")

Esta línea le dice al mapa que cada vez que necesite un tile (piensa en un tablero de ajedrez, cada uno de los cuadraditos es un tile, por ejemplo; o en los juegos, que usan el mismo concepto) tiene que hacer una petición al servidor, a la dirección que yo le diga, en este caso:

var url = '/tiles?z=[...]&x=[...]&y=[...]';

Esto significa que, si por ejemplo el mapa tuviera solo cuatro tiles (tienen unos pocos mas en la realidad) y estuviera a un zoom de cero, yo voy a empezar a recibir peticiones al servidor así:

/tiles?z=0&x=0&y=0
/tiles?z=0&x=1&y=0
/tiles?z=0&x=0&y=1
/tiles?z=0&x=1&y=1

Y como respuesta espera recibir las imágenes correspondientes a ese zoom(0) y esas (X,Y)

Si ahora el usuario hace zoom hasta z=5, y seguimos viendo solamente cuatro tiles, pues recibiría un pilón de peticiones así:

/tiles?z=5&x=0&y=0
/tiles?z=5&x=1&y=0
/tiles?z=5&x=0&y=1
/tiles?z=5&x=1&y=1

La dirección es /tiles, pero puede ser la que tu quieras, ejemplo:

var url = '/mapa.php?z=[...]&x=[...]&y=[...]';


¿En qué te ayuda todo este lío? Pues que implementar todo el JavaScript y «truquitos» para cada navegador te llevaría años, mucho dinero y un equipo entero. Usando Google Maps todo queda reducido a unas cuantas líneas de Javascript para configurar el mapa, y por supuesto un montón de procesamiento en el lado del servidor para guardar/enviar las imagenes.

Me parece que era esto lo que preguntabas, pero si te quedan dudas, como decía al principio, no dudes en preguntar lo que quieras =)
__________________
I (L) Google

Última edición por perryjr; 23/07/2011 a las 17:55 Razón: Tanta x y ya me habia equivocado :)