Guia de início rápido: criar um mapa de pesquisa interativo com o Azure Maps

  • Artigo

Este guia de início rápido demonstra como usar o Azure Maps para criar um mapa que oferece aos usuários uma experiência de pesquisa interativa. Ele orienta você através destas etapas básicas:

  • Crie sua própria conta do Azure Maps.
  • Obtenha sua chave de assinatura do Azure Maps para usar no aplicativo Web de demonstração.
  • Transfira e abra a aplicação de mapas de demonstração.

Este início rápido usa o SDK da Web do Azure Maps, no entanto, o serviço Azure Maps pode ser usado com qualquer controle de mapa, como esses controles de mapa de código aberto populares para os quais a equipe do Azure Maps criou plug-ins.

Pré-requisitos

Criar uma conta do Azure Maps

Crie uma nova conta do Azure Maps com as seguintes etapas:

  1. Selecione Criar um recurso no canto superior esquerdo do portal do Azure.

  2. Digite Azure Maps na caixa Serviços de pesquisa e Marketplace .

  3. Selecione Azure Maps na lista suspensa exibida e selecione o botão Criar .

  4. Na página Criar uma Conta do Azure Maps, insira os seguintes valores e selecione o botão Criar:

    • A Subscrição que quer utilizar para esta conta.
    • O nome do Grupo de recursos para esta conta. Você pode optar por Criar novo ou Selecionar grupo de recursos existente .
    • O Nome da sua nova conta do Azure Maps.
    • O nível de preço para esta conta. Selecione Gen2.
    • Leia a Declaração de Licença e Privacidade e marque a caixa de seleção para aceitar os termos.

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

Obter a chave de subscrição da sua conta

Depois que sua conta do Azure Maps for criada com êxito, recupere a chave de assinatura que permite consultar as APIs do Google Maps.

  1. Abra a sua conta do Maps no portal.
  2. Na seção de configurações, selecione Autenticação.
  3. Copie a Chave Primária e salve-a localmente para usá-la mais tarde neste tutorial.

Screenshot showing your Azure Maps subscription key in the Azure portal.

Nota

Este guia de início rápido usa a abordagem de autenticação de chave compartilhada para fins de demonstração, mas a abordagem preferida para qualquer ambiente de produção é usar a autenticação [Microsoft Entra ID].

Transferir e atualizar a demonstração do Azure Maps

  1. Copie o conteúdo do arquivo: Guia de início rápido da Pesquisa Interativa.html.
  2. Salve o conteúdo desse arquivo localmente como AzureMapDemo.html. Abra-o em um editor de texto.
  3. Adicione o valor da Chave Primária obtido na seção anterior
    1. Comente todo o código na authOptions função, este código é usado para autenticação do Microsoft Entra.
    2. Descomente as duas últimas linhas da authOptions função, esse código é usado para autenticação de chave compartilhada, a abordagem que está sendo usada neste início rápido.
    3. Substitua <Your Azure Maps Key> pelo valor da chave de assinatura da seção anterior.

Abra o aplicativo de demonstração

  1. Abra o ficheiro AzureMapDemo.html num browser da sua preferência.

  2. Observe o mapa mostrado da cidade de Los Angeles. Amplie e reduza para ver como o mapa é composto automaticamente com mais ou menos informações consoante o nível de zoom.

  3. Altere o centro predefinido do mapa. No ficheiro AzureMapDemo.html, procure a variável com o nome center. Substitua o valor do par longitude/latitude desta variável pelos novos valores [-74.0060, 40.7128]. Guarde o ficheiro e atualize o browser.

  4. Usufrua da experiência de pesquisa interativa. Na caixa de pesquisa no canto superior esquerdo da aplicação Web de demonstração, procure restaurantes.

  5. Passe o rato sobre a lista de endereços e localizações que aparecem por baixo da caixa de pesquisa. Observe como o pino correspondente no mapa exibe informações sobre esse local. Por motivos de privacidade das empresas privadas, são apresentados nomes e endereços fictícios.

    Screenshot showing the interactive map search web application.

Clean up resources (Limpar recursos)

Importante

Os tutoriais listados na seção Próximas etapas detalham como usar e configurar o Azure Maps com sua conta. Não limpe os recursos criados neste início rápido se você planeja continuar com os tutoriais.

Se você não planeja continuar com os tutoriais, siga estas etapas para limpar os recursos:

  1. Feche o navegador que executa o aplicativo Web AzureMapDemo.html .
  2. Navegue para o portal do Azure. Selecione Todos os recursos na página principal do portal ou selecione o ícone de menu no canto superior esquerdo e, em seguida, Todos os recursos.
  3. Selecione a sua conta do Azure Maps e, em seguida, selecione Eliminar na parte superior da página.

Para obter mais exemplos de código e uma experiência de codificação interativa, consulte estes artigos:

Próximos passos

Neste início rápido, você criou uma conta do Azure Maps e um aplicativo de demonstração. Consulte os seguintes tutoriais para saber mais sobre o Azure Maps:

Pesquisar pontos de interesse próximos com o Azure Maps