Exibindo mapas em um site de Páginas da Web do ASP.NET (Razor)

  • Artigo

por Tom FitzMacken

Este artigo explica como exibir mapas interativos em páginas em um site do Páginas da Web do ASP.NET (Razor) com base nos serviços de mapeamento fornecidos pelo Bing, Google, MapQuest e Yahoo.

O que você aprenderá:

  • Como gerar um mapa com base em um endereço.
  • Como gerar um mapa com base em coordenadas de latitude e longitude.
  • Como registrar uma conta de desenvolvedor Bing Mapas e obter uma chave a ser usada com Bing Mapas.

Este é o recurso ASP.NET introduzido no artigo:

  • O Maps auxiliar.

Versões de software usadas no tutorial

  • Páginas da Web do ASP.NET (Razor) 2
  • WebMatrix 2

Este tutorial também funciona com o WebMatrix 3.

Em Páginas da Web, você pode exibir mapas em uma página usando Maps o auxiliar . Você pode gerar mapas com base em um endereço ou em um conjunto de coordenadas de longitude e latitude. A Maps classe permite chamar mecanismos de mapa populares, incluindo Bing, Google, MapQuest e Yahoo.

As etapas para adicionar mapeamento a uma página são as mesmas, independentemente de quais dos mecanismos de mapa você chamar. Basta adicionar uma referência de arquivo JavaScript que disponibiliza métodos para exibir o mapa e, em seguida, chamar métodos do Maps auxiliar.

Você escolhe um serviço de mapa com base em qual Maps método auxiliar você usa. Você pode usar qualquer um destes:

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

Instalando as peças necessárias

Para exibir mapas, você precisa destas partes:

  • O Maps auxiliar. Esse auxiliar está na versão 2 da Biblioteca de Auxiliares da Web do ASP.NET. Se você ainda não adicionou a biblioteca, poderá instalá-la em seu site como um pacote NuGet. Para obter detalhes, consulte Instalando auxiliares em um site de Páginas da Web do ASP.NET. (Na Galeria, pesquise o microsoft-web-helpers pacote.)
  • A biblioteca jQuery. Vários dos modelos de site da WebMatrix já incluem bibliotecas jQuery em suas pastas script . Se você não tiver essas bibliotecas, poderá baixar a biblioteca jQuery mais recente diretamente do site jQuery.org . Ou você pode criar um novo site usando um modelo (por exemplo, o modelo site inicial) e, em seguida, copiar os arquivos jQuery desse site para o site atual.

Por fim, se você quiser usar os mapas do Bing, primeiro crie uma conta (gratuita) e obtenha uma chave. Para obter uma chave, siga estas etapas:

  1. Crie uma conta na conta de desenvolvedor do Bing Mapas. Você também deve ter uma conta microsoft (Windows Live ID).

    Você pode especificar que deseja usar a chave para Avaliação/Teste. Se você estiver testando a função de mapeamento em seu próprio computador usando WebMatrix e IIS Express, acesse o workspace Site e anote a URL do seu site (por exemplo, http://localhost:50408, embora o número da porta provavelmente seja diferente). Você pode usar esse endereço localhost como o site ao se registrar.

  2. Depois de se registrar para uma conta, vá para o Centro de Contas do Bing Mapas e clique em Criar ou exibir chaves:

    mapping-2

  3. Registre a chave que o Bing cria.

Criando um mapa com base em um endereço (usando o Google)

O exemplo a seguir mostra como criar uma página que renderiza um mapa com base em um endereço. Este exemplo mostra como usar o Google Maps.

  1. Crie um arquivo chamado MapAddress.cshtml na raiz do site. Esta página gerará um mapa com base em um endereço que você passa para ele.

  2. Copie o código a seguir para o arquivo, substituindo o conteúdo 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 os seguintes recursos da página:

    • O <script> elemento no <head> elemento . No exemplo, o <script> elemento faz referência ao arquivo jquery-1.6.4.min.js , que é uma versão minificada (compactada) da biblioteca jQuery, versão 1.6.4. Observe que a referência pressupõe que o arquivo .js está na pasta Scripts do seu site.

      Observação

      Se você estiver usando uma versão diferente da biblioteca jQuery, apenas verifique se está apontando para essa versão corretamente.

    • A chamada para o @Maps.GetGoogleHtml no corpo da página. Para mapear um endereço, você deve passar uma cadeia de caracteres de endereço. Os métodos para os outros mecanismos de mapa funcionam de maneira semelhante (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

  3. Execute a página e insira um endereço. A página exibe um mapa, com base no Google Maps, que mostra o local especificado.

    mapping-1

Criando um mapa com base em coordenadas de latitude e longitude (usando o Bing)

Este exemplo mostra como criar um mapa com base em coordenadas. Este exemplo mostra como usar os mapas do Bing e como incluir sua chave do Bing. (Você pode criar um mapa com base em coordenadas usando os outros mecanismos de mapa também, sem usar uma chave do Bing.)

  1. Crie um arquivo chamado MapCoordinates.cshtml na raiz do site e substitua o conteúdo existente pelo seguinte código e marcação:

    <!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. Substitua your-key-here pela chave Bing Mapas que você gerou anteriormente.

  3. Execute a página MapCoordinates.cshtml, insira coordenadas de latitude e longitude e clique no botão Mapear! (Se você não souber nenhuma coordenada, tente o seguinte. Este é um local no campus do Microsoft Redmond.)

    • Latitude: 47,6781005859375

    • Longitude: -122.158317565918

      A página é exibida usando as coordenadas que você especificou.

      mapping-3

Recursos adicionais

Referência da API do Microsoft.Maps