Criar um mapa de pesquisa interativo usando o Azure MapasCreate an interactive search map by using Azure Maps

Este artigo demonstra os recursos dos Mapas do Azure para criar um mapa que fornece aos usuários uma experiência de pesquisa interativa.This article demonstrates the capabilities of Azure Maps to create a map that gives users an interactive search experience. Ele apresenta e explica as seguintes etapas básicas:It walks you through these basic steps:

  • Criar sua conta do Azure Mapas.Create your own Azure Maps account.
  • Obter a chave de conta para usar no aplicativo Web de demonstração.Get your account key to use in the demo web application.

Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Entre no Portal do AzureSign in to the Azure portal

Entre no Portal do Azure.Sign in to the Azure portal.

Criar uma conta e obter sua chaveCreate an account and get your key

  1. No canto superior esquerdo do Portal do Azure, selecione Criar um recurso.In the upper-left corner of the Azure portal, select Create a resource.

  2. Na caixa Pesquisar no Marketplace, digite Mapas.In the Search the Marketplace box, enter Maps.

  3. Nos Resultados, selecione Mapas.From the Results, select Maps. Selecione o botão Criar que aparece abaixo do mapa.Select the Create button that appears below the map.

  4. Na página Criar Conta do Azure Mapas, insira os seguintes valores:On the Create Azure Maps Account page, enter the following values:

    • O Nome da sua nova conta.The Name of your new account.

    • A Assinatura que você deseja usar para a conta.The Subscription that you want to use for this account.

    • O Grupo de recursos dessa conta.The Resource group for this account. Você pode optar por Criar novo ou Usar existente em relação ao grupo de recursos.You might choose to Create new or Use existing resource group.

    • Selecione o Tipo de Preço de sua escolha.Select the Pricing Tier of your choice.

    • Leia a Licença e a Política de Privacidade.Read the License and Privacy Statement. Marque a caixa de seleção para aceitar os termos.Select the check box to accept the terms.

    • Por fim, selecione o botão Criar.Finally, select the Create button.

      Crie uma conta do Azure Mapas no portal

  5. Depois de criar a conta, abra-a e encontre a seção de configurações no menu da conta.After your account is successfully created, open it and find the settings section of the account menu. Selecione Chaves para ver as chaves primária e secundária da sua conta do Azure Mapas.Select Keys to view the primary and secondary keys for your Azure Maps account. Copie o valor de Chave Primária para a área de transferência local a ser usada na seção a seguir.Copy the Primary Key value to your local clipboard to use in the following section.

Fazer o download do aplicativoDownload the application

  1. Baixe ou copie o conteúdo do arquivo interactiveSearch.html.Download or copy the contents of the file interactiveSearch.html.
  2. Salve o conteúdo deste arquivo localmente como AzureMapDemo.html.Save the contents of this file locally as AzureMapDemo.html. Abra-o em um editor de texto.Open it in a text editor.
  3. Pesquise pela cadeia de caracteres <Your Azure Maps Key>.Search for the string <Your Azure Maps Key>. Substitua-o pelo valor Chave primária da seção anterior.Replace it with the Primary Key value from the preceding section.

Abra o aplicativoOpen the application

  1. Abra o arquivo AzureMapDemo.html em um navegador de sua escolha.Open the file AzureMapDemo.html in a browser of your choice.

  2. Observe o mapa mostrado da Cidade de Los Angeles.Observe the map shown of the City of Los Angeles. Amplie e reduza para ver como o mapa renderiza automaticamente com mais ou menos informações, dependendo do nível de zoom.Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. Altere o centro padrão do mapa.Change the default center of the map. No arquivo AzureMapDemo.html, procure a variável chamada center.In the AzureMapDemo.html file, search for the variable named center. Substitua o par de valores de latitude e longitude dessa variável pelos novos valores [-74,0060; 40,7128].Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. Salve o arquivo e atualize seu navegador.Save the file and refresh your browser.

  4. Teste a experiência de pesquisa interativa.Try out the interactive search experience. Na caixa de pesquisa no canto superior esquerdo do aplicativo Web da demonstração, pesquise restaurantes.In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. Mova o mouse sobre a lista de endereços e locais que aparecem abaixo da caixa de pesquisa.Move your mouse over the list of addresses and locations that appear below the search box. Observe como o marcador correspondente no mapa mostra informações sobre esse local.Notice how the corresponding pin on the map pops out information about that location. Para preservar a privacidade de empresas particulares, são mostrados endereços e nomes fictícios.For privacy of private businesses, fictitious names and addresses are shown.

    Aplicativo Web de pesquisa interativa

Limpar recursosClean up resources

Os tutoriais entram em detalhes sobre como usar e configurar o Azure Mapas com sua conta.The tutorials detail how to use and configure Azure Maps with your account. Se você planeja continuar com os tutoriais, não limpe os recursos criados neste início rápido.Don't clean up the resources created in this quickstart if you plan to continue to the tutorials. Se você não planeja continuar, siga estas etapas para limpar os recursos:If you don't plan to continue, take these steps to clean up the resources:

  1. Feche o navegador que está executando o aplicativo Web AzureMapDemo.html.Close the browser that runs the AzureMapDemo.html web application.
  2. No menu à esquerda no portal do Azure, selecione Todos os recursos.From the left menu in the Azure portal, select All resources. Em seguida, selecione sua conta do Azure Mapas.Then select your Azure Maps account. Na parte superior da folha Todos os recursos, marque Excluir.At the top of the All resources blade, select Delete.

Próximas etapasNext steps

Neste início rápido, você criou sua conta do Azure Mapas e criou um aplicativo de demonstração.In this quickstart, you created your Azure Maps account and created a demo app. Confira os seguintes tutoriais para saber mais sobre os Azure Mapas:Take a look at the following tutorials to learn about Azure Maps:

Para obter mais exemplos de código e uma experiência interativa de codificação, consulte estes guias:For more code examples and an interactive coding experience, see these guides: