Compartilhar via


Início Rápido: Criar um mapa de pesquisa interativo com o Azure Mapas

Este início rápido demonstra como usar o Azure Mapas para criar um mapa que oferece aos usuários uma experiência de pesquisa interativa. Ele apresenta e explica as seguintes etapas básicas:

  • Criar sua conta do Azure Mapas.
  • Obtenha sua chave de assinatura do Azure Mapas para usar no aplicativo Web de demonstração.
  • Baixe e abra o aplicativo de mapa de demonstração.

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

Pré-requisitos

Criar uma conta dos Mapas do Azure

Crie uma conta do Azure Mapas seguindo as etapas abaixo:

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

  2. Na caixa Pesquisar serviços no Marketplace, digite Azure Mapas.

  3. Selecione Azure Mapas na lista suspensa exibida e, em seguida, selecione o botão Criar.

  4. Na página Criar um recurso de conta do Azure Mapas, insira os seguintes valores e, em seguida, selecione o botão Criar:

    • A Assinatura que você deseja usar para a conta.
    • O nome do Grupo de recursos para a conta. Você pode optar por Criar novo ou Usar existente em relação ao grupo de recursos.
    • O Nome da sua nova conta do Azure Mapas.
    • A Camada de preços para essa conta. Selecione Gen2.
    • Leia a Política de Privacidade e de Licença 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 assinatura para sua conta

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

  1. Abra a sua conta dos Mapas no portal.
  2. Na seção de configurações, selecione Autenticação.
  3. Copie a Chave primáriae salve-a localmente para usar depois neste tutorial.

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

Observação

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

Baixar e atualizar a demonstração do Azure Mapas

  1. Copie o conteúdo do arquivo: Início Rápido da Busca Interativa.html.
  2. Salve o conteúdo deste arquivo localmente como AzureMapDemo.html. Abra-o em um editor de texto.
  3. Adicione o valor Chave Primária que você recebeu na seção anterior
    1. Comente todo o código na função authOptions, esse código é usado para autenticação do Microsoft Entra.
    2. Remova a marca de comentário das duas últimas linhas na função authOptions. Esse código é usado para autenticação de Chave Compartilhada, que é a abordagem que está sendo usada neste guia de início rápido.
    3. Substitua <Your Azure Maps Key> pelo valor da chave de assinatura da seção anterior.

Abrir o aplicativo de demonstração

  1. Abra o arquivo AzureMapDemo.html em um navegador de sua escolha.

  2. Observe o mapa mostrado da Cidade de Los Angeles. Amplie e reduza para ver como o mapa renderiza automaticamente com mais ou menos informações, dependendo do nível de zoom.

  3. Altere o centro padrão do mapa. No arquivo AzureMapDemo.html, procure a variável chamada center. Substitua o par de valores de latitude e longitude dessa variável pelos novos valores [-74,0060; 40,7128] . Salve o arquivo e atualize seu navegador.

  4. Teste a experiência de pesquisa interativa. Na caixa de pesquisa no canto superior esquerdo do aplicativo Web da demonstração, pesquise restaurantes.

  5. Mova o mouse sobre a lista de endereços e locais que aparecem abaixo da caixa de pesquisa. Observe como o marcador correspondente no mapa mostra informações sobre esse local. Para preservar a privacidade de empresas particulares, são mostrados endereços e nomes fictícios.

    Screenshot showing the interactive map search web application.

Limpar recursos

Importante

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

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

  1. Feche o navegador que está executando o aplicativo Web AzureMapDemo.html.
  2. Navegue até o portal do Azure. Selecione todos os recursos na página do portal principal ou selecione o ícone de menu no canto superior esquerdo e em Todos os recursos.
  3. Selecione a conta do Azure Mapas e, em seguida, selecione Excluir na parte superior da página.

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

Próximas etapas

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