Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

Usar Google Street View con Bing Maps y Silverlight

Publicada el 15 mayo, 201121 mayo, 2012
Twittear

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

referencias

 

Ya que tienes las referencias, solo agrega el control de mapa de Bing desde tu pestaña de “Assets” en Expression Blend

assets

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"/>

<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.

Mexico

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);
}

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

mensaje

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;amp;v=2.x&amp;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>';
?>

<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;amp;v=2.x&amp;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;amp;longitud=" + longitud), "_blank");
}

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;amp;longitud=" + longitud), "_blank"); }

Y listo, ya puedes navegar, además puedes ver probarlo antes con la siguiente demo.

Install Microsoft Silverlight

Descarga el código desde aqui

Descarga el script PHP desde aquí

2 comentarios en «Usar Google Street View con Bing Maps y Silverlight»

  1. Ruben dice:
    2 marzo, 2020 a las 10:24 pm

    Me podrías ayudar, no puedo hacerlo como tú?

    Responder
    1. Amin Espinoza dice:
      18 marzo, 2020 a las 1:54 pm

      Hola Rubén, lamentablemente hace mucho que Silverlight dejó de servir a modo productivo.

      Responder

Deja una respuesta Cancelar la respuesta

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

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress