Usar o controle de mapeamento do Azure MapsUse the Azure Maps map control

O Controle de Mapeamento biblioteca JavaScript do lado do cliente permite renderizar mapas e a funcionalidade do Azure Maps incorporada em seu aplicativo Web ou móvel.The Map Control client-side JavaScript library allows you to render maps and embedded Azure Maps functionality into your web or mobile application.

Criar um novo mapa em uma página da webCreate a new map in a web page

Você pode inserir um mapa em uma página da Web usando o Controle de Mapeamento biblioteca JavaScript do lado do cliente.You can embed a map in a web page by using the Map Control client-side JavaScript library.

  1. Criar um novo arquivo HTML.Create a new HTML file.

  2. Carregar no SDK Web do Azure Mapas.Load in the Azure Maps Web SDK. Você pode escolher uma das duas opções;You can choose one of two options;

    • Use a versão da CDN hospedada globalmente do SDK da Web do Azure Maps adicionando referências ao JavaScript e à folha <head> de estilos no elemento do arquivo HTML:Use the globally hosted CDN version of the Azure Maps Web SDK by adding references to the JavaScript and stylesheet in the <head> element of the HTML file:

      <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
      <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
      
    • Carregue o código-fonte do SDK da Web do Azure Maps localmente usando o pacote Azure-Maps-Control NPM e hospede-o com seu aplicativo.Load the Azure Maps Web SDK source code locally using the azure-maps-control NPM package and host it with your app. Esse pacote também inclui definições de TypeScript.This package also includes TypeScript definitions.

      npm install azure-maps-controlnpm install azure-maps-control

      Em seguida, adicione as referências à folha de estilos do Azure Mapas e referências de origem de script ao elemento <head> do arquivo:Then add references to the Azure Maps stylesheet and script source references to the <head> element of the file:

      <link rel="stylesheet" href="node_modules/azure-maps-control/dist/atlas.min.css" type="text/css"> 
      <script src="node_modules/azure-maps-control/dist/atlas.min.js"></script>
      

    Observação

    As definições do typescript podem ser importadas para seu aplicativo adicionando o seguinte código:Typescript definitions can be imported into your application by adding the following code:

    import * as atlas from 'azure-maps-control';
    
  3. Para renderizar o mapa de modo que ele preencha a página inteira, adicione o seguinte elemento <style> ao elemento <head>.To render the map so that it fills the full body of the page, add the following <style> element to the <head> element.

     <style>
         html, body {
             margin: 0;
         }
    
         #myMap {
             height: 100vh;
             width: 100vw;
         }
     </style>
    
  4. No corpo da página, adicione um elemento <div> e dê a ele um id de myMap.In the body of the page, add a <div> element and give it an id of myMap.

     <body>
         <div id="myMap"></div>
     </body>
    
  5. Para inicializar o controle de mapa, defina uma nova marca de script no corpo HTML.To initialize the map control, define a new script tag in the html body. Passe id o do mapa <div> ou um HTMLElement (por exemplo, document.getElementById('myMap')) como o primeiro parâmetro ao criar uma instância da Map classe.Pass in the id of the map <div> or an HTMLElement (for example, document.getElementById('myMap')) as the first parameter when creating an instance of the Map class. Use sua própria chave de conta do Azure Mapas ou as credenciais do AAD (Azure Active Directory) para autenticar o mapa usando as opções de autenticação.Use your own Azure Maps account key or Azure Active Directory (AAD) credentials to authenticate the map using authentication options.

    Se você precisar criar uma conta ou encontrar sua chave, siga as instruções em criar uma conta e obter chave primária .If you need to create an account or find your key, follow instructions in Create an account and get primary key .

    A opção linguagem especifica a linguagem a ser usada nos rótulos e nos controles de mapa.The language option specifies the language to be used for map labels and controls. Para obter mais informações sobre os idiomas com suporte, consulte idiomas com suporte. Se você estiver usando uma chave de assinatura para autenticação, use o seguinte:For more information on supported languages, see supported languages.If you are using a subscription key for authentication, use the following:

     <script type="text/javascript">
         var map = new atlas.Map('myMap', {
             center: [-122.33, 47.6],
             zoom: 12,
             language: 'en-US',
             authOptions: {
                 authType: 'subscriptionKey',
                 subscriptionKey: '<Your Azure Maps Key>'
             }
         });
     </script>
    

    Se você estiver usando o Azure Active Directory (AAD) para autenticação, use o seguinte:If you are using Azure Active Directory (AAD) for authentication, use the following:

     <script type="text/javascript">
         var map = new atlas.Map('myMap', {
             center: [-122.33, 47.6],
             zoom: 12,
             language: 'en-US',
             authOptions: {
                 authType: 'aad',
                 clientId: '<Your AAD Client Id>',
                 aadAppId: '<Your AAD App Id>',
                 aadTenant: '<Your AAD Tenant Id>'
             }
         });
     </script>
    

    Uma lista de exemplos que mostram como integrar Azure Active Directory (AAD) com mapas do Azure pode ser encontrada aqui.A list of samples showing how to integrate Azure Active Directory (AAD) with Azure Maps can be found here.

    Para obter mais informações, consulte o documento autenticação com o Azure Maps e também os exemplos de autenticaçãodo Azure AD do Azure Maps.For more information, see the Authentication with Azure Maps document and also the Azure Maps Azure AD authentication samples.

  6. Como opção, você poderá considerar útil adicionar os seguintes elementos de marcação meta ao cabeçalho da sua página:Optionally, you may find adding the following meta tag elements to the head of your page helpful:

     <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
     <meta http-equiv="x-ua-compatible" content="IE=Edge">
    
     <!-- Ensures the web page looks good on all screen sizes. -->
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
  7. Colocar tudo em conjunto em seu arquivo HTML deve ser semelhante ao seguinte código:Putting it all together your HTML file should look something like the following code:

     <!DOCTYPE html>
     <html>
     <head>
         <title></title>
    
         <meta charset="utf-8">
    
         <!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
         <meta http-equiv="x-ua-compatible" content="IE=Edge">
    
         <!-- Ensures the web page looks good on all screen sizes. -->
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
         <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
         <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
         <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
         <style>
             html, body {
                 margin: 0;
             }
    
             #myMap {
                 height: 100vh;
                 width: 100vw;
             }
         </style>
     </head>
     <body>
         <div id="myMap"></div>
    
         <script type="text/javascript">
             //Create an instance of the map control and set some options.
             var map = new atlas.Map('myMap', {
                 center: [-122.33, 47.6],
                 zoom: 12,
                 language: 'en-US',
                 authOptions: {
                     authType: 'subscriptionKey',
                     subscriptionKey: '<Your Azure Maps Key>'
                 }
             });
         </script>
     </body>
     </html>
    
  8. Abra o arquivo no seu navegador da Web e exiba o mapa renderizado.Open the file in your web browser and view the rendered map. Ele deve ser semelhante à imagem abaixo:It should look like the image below:

    Imagem do mapa mostrando resultado renderizado

Como localizar o mapaLocalizing the map

O mapas do Azure fornece duas maneiras diferentes de definir o idioma e a exibição regional para o mapa renderizado.Azure Maps provides two different ways of setting the language and regional view for the rendered map. A primeira opção é adicionar essas informações ao namespace global atlas , o que resultará em todas as instâncias de controle de mapa em seu aplicativo padronizando essas configurações.The first option is to add this information to the global atlas namespace, which will result in all map control instances in your app defaulting to these settings. O seguinte define o idioma como francês ("fr-FR") e a exibição regional como "auto":The following sets the language to French ("fr-FR") and the regional view to "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('Auto');

A segunda opção é passar essas informações para as opções de mapa ao carregar o mapa da seguinte maneira:The second option is to pass this information into the map options when loading the map like this:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'Auto',

    authOptions: {
        authType: 'aad',
        clientId: '<Your AAD Client Id>',
        aadAppId: '<Your AAD App Id>',
        aadTenant: '<Your AAD Tenant Id>'
    }
});

Observação

Com o SDK da Web, é possível carregar várias instâncias de mapa na mesma página com diferentes configurações de idioma e região.With the Web SDK it is possible to load multiple map instances on the same page with different language and region settings. Além disso, essas configurações podem ser atualizadas depois que o mapa setStyle é carregado usando a função do mapa.Additionally, these settings can be updated after the map loads using the setStyle function of the map.

Aqui está um exemplo de mapas do Azure com o idioma definido como "fr-FR" e a exibição regional definida como "auto".Here is an example of Azure Maps with the language set to "fr-FR" and the regional view set to "Auto".

Imagem do mapa mostrando rótulos em francês

Uma lista completa de idiomas e exibições regionais compatíveis está documentada aqui.A complete list of supported languages and regional views is documented here.

Suporte de nuvem do Azure governamentalAzure Government cloud support

O SDK da Web do Azure Maps dá suporte à nuvem do Azure governamental.The Azure Maps Web SDK supports the Azure Government cloud. Todas as URLs de JavaScript e CSS usadas para acessar o SDK da Web do Azure Maps permanecem as mesmas.All JavaScript and CSS URLs used to access the Azure Maps Web SDK remain the same. As tarefas a seguir precisarão ser feitas para se conectar à versão de nuvem do Azure governamental da plataforma do Azure Maps.The following tasks will need to be done to connect to the Azure Government cloud version of the Azure Maps platform.

Ao usar o controle de mapa interativo, adicione a seguinte linha de código antes de criar uma instância Map da classe.When using the interactive map control, add the following line of code before creating an instance of the Map class.

atlas.setDomain('atlas.azure.us');

Certifique-se de usar os detalhes de autenticação do Azure Maps da plataforma de nuvem do Azure governamental ao autenticar o mapa e os serviços.Be sure to use Azure Maps authentication details from the Azure Government cloud platform when authenticating the map and services.

Ao usar o módulo de serviços, o domínio para os serviços precisa ser definido ao criar uma instância de um ponto de extremidade de URL de API.When using the services module, the domain for the services needs to be set when creating an instance of an API URL endpoint. Por exemplo, o código a seguir cria uma instância da SearchURL classe e aponta o domínio para a nuvem do Azure governamental.For example, the following code creates an instance of the SearchURL class and points the domain to the Azure Government cloud.

var searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');

Se acessar diretamente os serviços REST do Azure Maps, altere o domínio da atlas.azure.usURL para.If directly accessing the Azure Maps REST services, change the URL domain to atlas.azure.us. Por exemplo, se estiver usando o serviço de API de pesquisa, altere o https://atlas.microsoft.com/search/ domínio https://atlas.azure.us/search/de URL de para.For example, if using the search API service, change the URL domain from https://atlas.microsoft.com/search/ to https://atlas.azure.us/search/.

Próximas etapasNext steps

Saiba como criar e interagir com um mapa:Learn how to create and interact with a map:

Saiba como definir o estilo de um mapa:Learn how to style a map:

Para adicionar mais dados ao seu mapa:To add more data to your map:

Para obter uma lista de exemplos que mostram como integrar o Azure Active Directory (AAD) com o Azure Maps, consulte:For a list of samples showing how to integrate Azure Active Directory (AAD) with Azure Maps, see: