La herramienta de mapa de Bing Maps para Silverlight es una herramienta genial, además de sencilla de usar, pero no cuenta con una herramienta que sea tan útil como Street View, el punto es que mientras no exista, fusionar ambas herramientas se me hace una idea bastante benéfico en muchos aspectos.
Así que comencemos a hacerlo, pues además de todo, es muy sencillo.
Lo primero que debes hacer es entrar a las páginas de Bing Maps y Google Maps API para obtener las dos llaves que necesitamos para trabajar.
Visita este link para obtener la API Key de Bing
Visita este link para obtener la API Key de Google
Bien, ya que tenemos las dos llaves, puedes iniciar un nuevo proyecto en Expression Blend y colocar un mapa en él, esto lo haces de la siguiente manera
En primer lugar, debes incorporar las referencias que obtuviste cuando te inscribiste con la API de Bing Maps
Ya que tienes las referencias, solo agrega el control de mapa de Bing desde tu pestaña de “Assets” en Expression Blend
Con esto listo, ya solo agrega el control del mapa y establece la ubicación de una ciudad en donde quieras ver la vista de calles.
<bing:Map x:Name="mapa" Center="19.4291,-99.126" ZoomLevel="14" Mode="AerialWithLabels" NavigationVisibility="Collapsed" ScaleVisibility="Collapsed" CredentialsProvider="Ajtc9UQoW_fIE-ijLj_XmEnUvIhpnQ6yRVRdiKlR0jxLKsL0yL3hxIEK0of9x498"/> |
Esta ubicación es del centro de la ciudad de México y aclaro que la llave es distinta, recuerda que debes sacar la tuya propia., el resultado es algo parecido a esto.
Ahora agregale el evento “MouseLeftButtonDown” a tu control de mapa, por ahora solo nos mandará un mensaje con la ubicación.
private void mapa_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { string latitud = ""; string longitud= ""; Point puntoUbicado = e.GetPosition(mapa); Location ubicacion; if (mapa.TryViewportPointToLocation(puntoUbicado, out ubicacion)) { latitud = Math.Round(ubicacion.Latitude, 5).ToString(); longitud = Math.Round(ubicacion.Longitude, 5).ToString(); } MessageBox.Show("Tu latitud es: " + latitud + " tu longitud es: " + longitud); } |
Y listo, ya quedó obtienes algo así como esto
Hasta aquí quedamos con la parte Silverlight, ahora vámonos sobre la parte de Google, y en este caso lo único que necesitamos es un pequeño script que haga lo siguiente.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Visor de imagenes</title> </head> <html> <body onload="initialize()" onunload="GUnload()"> <?php echo ' <script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;v=2.x&amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAe1vp8qAM-yrodhJ5IRRRmIDEXqw-CxnT439kCFvszhQE7pAjRhu60bvCi-05tRYY4lw" type="text/javascript"></script> <script languaje="JavaScript function initialize() { var myPano = new GStreetviewPanorama(document.getElementById("pano")); var latitud = "'.$_GET["latitud"].'"; var longitud = "'.$_GET["longitud"].'"; locat = new GLatLng(latitud, longitud); myPOV = {yaw:0,pitch:5,zoom:0}; myPano.setLocationAndPOV(locat, myPOV); GEvent.addListener(myPano, "error", handleNoFlash); } function handleNoFlash(errorCode) { if (errorCode == 603) { alert("Error: Parece ser que no cuentas con flash"); return; } } </script>'; echo '<div name="pano" id="pano" style="width: 472px; height: 335px"></div>; </body> </html>'; ?> |
Si al igual que yo eres novato en PHP, te explico, en el este caso hay un script que corre vía Javascript y permite utilizar la herramienta de StreetView, pero sucede que necesita recibir los datos vía URL para poder hacerlo de forma dinámica, para este problema tenemos PHP que nos permite lograrlo, obtener vía URL los datos necesarios para correr tu rutina.
Guarda este script con extensión PHP, y colócalo en tu servidor web, MUY IMPORTANTE, tu servidor web debe tener soporte para PHP para que todo funcione de forma adecuada.
Ahora, por último solo vete a tu aplicación Silverlight y abre una nueva ventana de explorador con los datos necesarios, y elimina tu mensaje, para que quede de la siguiente forma.
private void mapa_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { string latitud = ""; string longitud= ""; Point puntoUbicado = e.GetPosition(mapa); Location ubicacion; if (mapa.TryViewportPointToLocation(puntoUbicado, out ubicacion)) { latitud = Math.Round(ubicacion.Latitude, 5).ToString(); longitud = Math.Round(ubicacion.Longitude, 5).ToString(); } HtmlPage.Window.Navigate(new Uri("http://localhost:82/mapa.php?latitud="+ latitud +"&amp;amp;amp;amp;amp;amp;amp;amp;longitud=" + longitud), "_blank"); } |
Y listo, ya puedes navegar, además puedes ver probarlo antes con la siguiente demo.
Descarga el código desde aqui
Descarga el script PHP desde aquí
Me podrías ayudar, no puedo hacerlo como tú?
Hola Rubén, lamentablemente hace mucho que Silverlight dejó de servir a modo productivo.