Mostrar mapas en un sitio de ASP.NET Web Pages (Razor)

  • Artículo

Por Tom FitzMacken

En este artículo se explica cómo mostrar mapas interactivos en páginas de un sitio web de ASP.NET Web Pages (Razor) basándose en los servicios de asignación proporcionados por Bing, Google, MapQuest y Yahoo.

Temas que se abordarán:

  • Cómo generar un mapa basándose en una dirección.
  • Cómo generar un mapa basándose en coordenadas de latitud y longitud.
  • Cómo registrar una cuenta de desarrollador de Bing Maps y obtener una clave para usarla con Bing Maps.

Esta es la característica de ASP.NET introducida en el artículo:

  • El asistente Maps.

Versiones de software usadas en el tutorial

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 2

Este tutorial también funciona con WebMatrix 3.

En las páginas web, puede mostrar mapas en una página mediante el Maps asistente. Puede generar mapas basados en una dirección o en un conjunto de coordenadas de longitud y latitud. La clase Maps le permite llamar a motores de mapa populares como Bing, Google, MapQuest y Yahoo.

Los pasos para agregar el mapeo a una página son los mismos independientemente de a cuál de los motores de mapa llame. Solo tiene que agregar una referencia de archivo JavaScript que haga que los métodos disponibles muestren el mapa y, a continuación, llame a los métodos del Maps asistente.

Elija un servicio de mapa en función del Maps método de asistente que use. Puede usar cualquiera de estas opciones:

  • Maps.GetBingHtml
  • Maps.GetGoogleHtml
  • Maps.GetYahooHtml
  • Maps.GetMapQuestHtml

Instalación de las piezas que necesita

Para mostrar mapas, necesita estas partes:

  • El asistente Maps. Este asistente está en la versión 2 de la biblioteca de asistentes web de ASP.NET. Si aún no ha agregado la biblioteca, puede instalarla en su sitio web como un paquete NuGet. Para obtener más información, consulte Instalación de asistentes en un sitio de ASP.NET Web Pages. (En la Galería, busque el microsoft-web-helpers paquete).
  • La biblioteca jQuery. Varias de las plantillas de sitio de WebMatrix ya incluyen bibliotecas de jQuery en sus carpetas de Script. Si no tiene estas bibliotecas, puede descargar la biblioteca jQuery más reciente directamente desde el sitio de jQuery.org. O bien, puede crear un sitio con una plantilla (por ejemplo, la plantilla de Sitio de inicio) y, a continuación, copiar los archivos jQuery de ese sitio a su sitio actual.

Por último, si desea usar Bing Maps, primero debe crear una cuenta (gratuita) y obtener una clave. Para obtener una clave, siga estos pasos:

  1. Cree una cuenta en la cuenta de desarrollador de Bing Maps. También debe tener una cuenta Microsoft (Windows Live ID).

    Puede especificar que desea usar la clave para Evaluación/Prueba. Si va a probar la función de asignación en su propio equipo con WebMatrix e IIS Express, vaya al área de trabajo Sitio y anote la dirección URL del sitio (por ejemplo, http://localhost:50408, aunque el número de puerto probablemente será diferente). Puede usar esta dirección localhost como sitio al registrarse.

  2. Después de registrar una cuenta, vaya al Centro de cuentas de Bing Maps y haga clic en Crear o ver claves:

    mapping-2

  3. Registre la clave que crea Bing.

Crear un mapa basado en una dirección (mediante Google)

En el ejemplo siguiente se muestra cómo crear una página que represente un mapa basado en una dirección. En este ejemplo se muestra cómo usar Google Maps.

  1. Cree un archivo denominado MapAddress.cshtml en la raíz del sitio. Esta página generará un mapa basado en una dirección que se le pase.

  2. Copie el código siguiente en el archivo y sobrescriba el contenido existente.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Map an Address</title>
  <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>

<body>
    <h1>Map an Address</h1>
    <form method="post">
        <fieldset>
          <div>
            <label for="address">Address:</label>
            <input style="width: 300px" type="text" name="address" value="@Request["address"]"/>
            <input type="submit" value="Map It!" />
           </div>
        </fieldset>
    </form>
    @if(IsPost) {
        @Maps.GetGoogleHtml(Request.Form["address"],
            width: "400",
            height: "400")
    }
</body>
</html>

    Observe las siguientes características de la página:

    • Elemento <script> del <head> elemento. En el ejemplo, el <script> elemento hace referencia al archivo jquery-1.6.4.min.js, que es una versión mínima (comprimida) de la biblioteca jQuery, versión 1.6.4. Tenga en cuenta que la referencia supone que el archivo .js está en la carpeta Scripts del sitio.

      Nota:

      Si usa una versión diferente de la biblioteca de jQuery, asegúrese de que apunta correctamente a esa versión.

    • Llamada a @Maps.GetGoogleHtml en el cuerpo de la página. Para asignar una dirección, debe pasar una cadena de dirección. Los métodos para los demás motores de mapas funcionan de forma similar (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

  3. Ejecute la página y escriba una dirección. La página muestra un mapa, basado en Google Maps, que muestra la ubicación especificada.

    mapping-1

Creación de un mapa basado en coordenadas de latitud y longitud (mediante Bing)

En este ejemplo se muestra cómo crear un mapa basado en coordenadas. En este ejemplo se muestra cómo usar Bing Maps y cómo incluir la clave de Bing. (También puede crear un mapa basado en coordenadas mediante otros motores de mapa, sin usar una clave de Bing).

  1. Cree un archivo denominado MapCoordinates.cshtml en la raíz del sitio y reemplace el contenido existente por el código y el marcado siguientes:

    <!DOCTYPE html>
<html lang="en"><head>
  <title>Map Coordinates</title>
  <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
  <h1>Map Coordinates</h1>
  <form method="post">
    <fieldset>
    <div>
      <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
        <input type="text" name="latitude" value="@Request["latitude"]"/>
    </div>
    <div>
      <label for="longitude">Longitude:</label>
      <input type="text" name="longitude" value="@Request["longitude"]"/>
    </div>
    <div>
      <input type="submit" value="Map It!" />
    </div>
    </fieldset>
  </form>
  @if(IsPost) {
      @Maps.GetBingHtml(key: "your-key-here",
          latitude: Request["latitude"],
          longitude: Request["longitude"],
          width: "300",
          height: "300"
       )
    }
</body>
</html>

  2. Reemplace your-key-here por la clave de Bing Maps que generó anteriormente.

  3. Ejecute la página MapCoordinates.cshtml, escriba coordenadas de latitud y longitud y, a continuación, haga clic en el botón Crear mapa. (Si no conoce ninguna coordenada, pruebe lo siguiente. Esta es una ubicación en el campus de Microsoft Redmond).

    • Latitud: 47.6781005859375

    • Longitud: -122.158317565918

      La página se muestra mediante las coordenadas especificadas.

      mapping-3

Recursos adicionales

Microsoft.Maps API Reference