Estoy hablando del control que Microsoft tiene para representar el mapa del mundo, sus provincias, países y calles, dicho de otra manera es el Google Earth de Microsoft. El ejemplo que voy a mostrar es muy sencillo pero sirve (al menos función conmigo) para familiarizarse con el control de Microsoft. El punto de partida comienza aca, donde explican que es un control de Javascript que contiene todos los métodos, propiedades y eventos. De este lado nos descargamos el CHM(la ayuda) del SDK para tener la documentación de las clases con ejemplos y todo.
Pero vamos directo al código y a medida que se van viendo las clases se van comprendiendo mejor el funcionamiento.
El puntapié inicial lo damos agregando el script que tiene todo el control (por supuesto que esta hosteado por Microsoft) en nuestra pagina, lo hacemos de esta manera en el Header del HTML:
<head> <title>Mapa del mundo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> </head>
La primer clase con que nos encontramos es la mas importante y es VEmap.
Un ejemplo básico de instancia de un mapa es(obviamente todo el código es de Javascript):
function GetMap() { map = new VEMap('myMap'); map.LoadMap(CapFed, 11, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); }
Donde myMap vamos a ver mas adelante que es el DIV en el HTML donde vamos a mostrar el mapa. Para las propiedades del método LoadMap:
la 1era es la zona donde queremos que aparezca exactamente (esto representa también una clase llama VELatLong que la explicamos mas adelante e indica Latitud y Longitud de cualquier lugar del mundo donde queremos que se inicie nuestro mapa.
La 2da es el zoom que va tener al momento de renderear.
La 3ra es el estilo de mapa podemos elegir entre: Road (calles), Shaded (es como el Road pero permite niveles de sombreado), Aerial (es la clásica vista satelital con los terrenos del suelo: montañas, ríos, etc.), Hybrid (es el aerial con los nombres de las ciudades, provincias y paises), Oblique y Birdseye son ambos estilos de imágenes de mapas y el BirdseyeHybrid que es como el Birdseyes pero con los nombres de las ciudades, provincias y países. A nosotros nos interesa el estilo Road.
4to Parámetro de Fixed, false para que puedas moverte por el mapa y true para que el mapa este fijo y no lo puedas mover.
5to el modo 2D o 3D (para 3D tenés que instalar un cliente).
6to showSwitch es la barrita que permite cambiar de 2D a 3D moverte en el mapa con el Zoom y cambiar el estilo de mapa, el default es True.
7to tileBuffer es el buffer que usa al cargar el mapa.
8to es mapOptions que permite la carga de otro mapa.
Ahora bien nos falta decirle donde queremos que inicie la vista del mapa y eso como comentaba anteriormente lo hacemos con el objeto VELatLong CapFed. Se forma de esta manera:
var CapFed = new VELatLong(-34.62473282635766, -58.520393371582045);
Así como esta inicia el mapa en Capital Federal y como esta en zoom 11 se logra ver hasta el 1er Cordón del Conurbano Bonaerense de la Provincia de Buenos Aires (Argentina por supuesto).
Lo primero que vamos a hacer es agregar un Pin a algún punto dentro del mapa. Para lograrlo basta con instancia un objeto VELatLong con el lugar exacto (alguno se puede preguntar como lo consigo? yo uso este programita proporcionado por microsoft que me muestra las coordenadas MapCruncher aunque su funcionalidad sea otra mucho mas amplia, sirve xD). El código es el siguiente:
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> <script type="text/javascript"> var map = null; //Esta Latitud y Longitud mas o menos es Capital Federal var CapFed = new VELatLong(-34.62473282635766, -58.520393371582045); //Esta Latitud y Longitud mas o menos es Capital Federal var CapFedDestino = new VELatLong(-34.69646117, -58.38546753); function GetMap() { map = new VEMap('myMap'); route = new VERoute; map.LoadMap(CapFed, 11, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); var myPolygon = new VEShape(VEShapeType.Pushpin, CapFed); map.AddShape(myPolygon); myPolygon.SetTitle("Origen"); myPolygon.SetDescription("Este es el punto 1"); var myPolygon2 = new VEShape(VEShapeType.Pushpin, CapFedDestino); map.AddShape(myPolygon2); myPolygon2.SetTitle("Destino"); myPolygon2.SetDescription("Este es el punto 2"); } </script> </head> <body onload="GetMap();">
Creando Rutas entre dos Puntos
Ahora vamos a realizar una de las cosas mas interesantes que tiene que son crear una ruta entre dos puntos geográficos.
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> <script type="text/javascript"> var map = null; var CapFed = new VELatLong(-34.62473282635766, -58.520393371582045); function GetMap() { map = new VEMap('myMap'); map.LoadMap(CapFed, 11, VEMapStyle.Road, false, VEMapMode.Mode2D, false, 1); } function GetRouteMap() { var locations; if (legForm.legType[0].checked) { //Los parametros son Desde, por donde y Hasta locations = new Array("Villa Devoto Argentina", "Moron Buenos Aires Argentina", "San Justo Buenos Aires Argentina", "Lanus Buenos Aires Argentina"); } else if (legForm.legType[1].checked) { locations = new Array("Villa Devoto Argentina", "Lanus Buenos Aires Argentina"); } var options = new VERouteOptions; options.DrawRoute = true; options.SetBestMapView = false; map.GetDirections(locations, options); } </script> </head> <body onload="GetMap();" style="font-family:Arial"> <h3>Rutas</h3> <div id='myMap' style="position:relative; width:100%; height:400px;"></div> <form name="legForm"> Route: <br/> <input id="thruAdelina" type="radio" name="legType" checked="checked"/> De Villa Devoto a Lanus (pasando por Moron y San Justo) <br/> <input id="thruMunro" type="radio" name="legType"/> De Villa Devoto a Lanus (sin escalas) </form> <form name="dirsForm"> </form> <input id="getroutemap" type="button" value="Realizar Ruta" onclick="GetRouteMap();"/> </body> </html>
Decía interesante porque el Array Locations en un caso tiene como inicio: el Origen(Villa Devoto), y luego tiene dos puntos por donde quiero que pase hasta llegar a mi destino(Lanus), esto tiene 2 cosas que son muy buenas la primera es que puedo indicarle las escalas que yo quiera y la segunda y mas fantástica es que solo necesito indicarle el nombre del barrio la provincia y el país (yo le di esos datos para que sea bien preciso) y el control decide la mejor ruta y realmente es una ruta que pasa por calles correctas sino basta con realizar un zoom y ver el recorrido por uno mismo.
Este esta es la ruta desde Villa Devoto hasta Lanus pasando por las 2 escalas:
Esta es la ruta realizada desde Villa Devoto hasta Lanus sin escalas:
Bueno esto es simplemente una introducción a las cosas que se pueden realizar que son realmente muchas y muy interesantes. A continuación voy a dejar tanto el ejemplo que realice como algunos links de interés para meterse mas en profundidad con el tema.
Código de Ejemplo (Hecho en VS2008): Link
Paginas de Interés:
Saludos
Escrito por Fernando Sanchez 
Escrito por Fernando Sanchez 
Escrito por Fernando Sanchez 
.
