Het kaartbesturingselement in Azure Maps gebruiken

Artikel
11/03/2021
6 minuten om te lezen

Met Map Control JavaScript-bibliotheek aan de clientzijde kunt u kaarten en ingesloten Azure-Kaarten in uw webtoepassing of mobiele toepassing renderen.

In deze documentatie wordt gebruikgemaakt van de Azure Kaarten Web SDK, maar de Azure Kaarten-services kunnen worden gebruikt met elk kaartbesturingselement. Hier zijn enkele populaire opensource-kaartbesturingselementen waar het Azure Kaarten voor heeft gemaakt.

Vereisten

Als u de Map Control op een webpagina wilt gebruiken, moet u een van de volgende vereisten hebben:

Maak een Azure Kaarten en verkrijg eenprimaire abonnementssleutel , ook wel de primaire sleutel of de abonnementssleutel genoemd.
Verkrijg uw Azure Active Directory (AAD) met verificatieopties.

Een nieuwe kaart maken op een webpagina

U kunt een kaart insluiten op een webpagina met behulp van Map Control JavaScript-bibliotheek aan de clientzijde.

Maak een nieuw HTML-bestand.
Laad in de Azure Kaarten Web SDK. U kunt een van de volgende twee opties kiezen:
- Gebruik de wereldwijd gehoste CDN-versie van de Azure Kaarten Web SDK door verwijzingen toe te voegen aan het JavaScript en het stijlblad in het element van <head> het HTML-bestand:
```
<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>
```
- Laad de Azure Kaarten Web SDK-broncode lokaal met behulp van het NPM-pakket azure-maps-control en host deze met uw app. Dit pakket bevat ook TypeScript-definities.
  
  npm install azure-maps-control
Voeg vervolgens verwijzingen naar het Azure Kaarten-stijlblad toe aan het <head> element van het bestand:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
```
Notitie

Typescript-definities kunnen worden geïmporteerd in uw toepassing door de volgende code toe te voegen:
```
import * as atlas from 'azure-maps-control';
```
Als u de kaart zo wilt weergeven dat deze de volledige hoofdmap van de pagina vult, voegt u het volgende <style> element toe aan het element <head> .
```
 <style>
     html, body {
         margin: 0;
     }

     #myMap {
         height: 100vh;
         width: 100vw;
     }
 </style>
```
Voeg in de hoofdmap van de pagina een <div> -element toe en geef het een id van myMap.
```
 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>
```
Nu initialiseren we het kaartbesturingselement. Als u het besturingselement wilt verifiëren, moet u eigenaar zijn van een Azure Kaarten-abonnementssleutel of Azure Active Directory-referenties (AAD) gebruiken met verificatieopties.

Als u een abonnementssleutel gebruikt voor verificatie, kopieert en plakt u het volgende scriptelement in het <head> element en onder het eerste <script> element. Vervang <Your Azure Maps Key> door de primaire Kaarten Azure-abonnementssleutel.
```
<script type="text/javascript">
    function InitMap()
    {
        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>
```
Als u een Azure Active Directory (AAD) gebruikt voor verificatie, kopieert en plakt u het volgende scriptelement in het element en onder <head> het eerste <script> element.
```
<script type="text/javascript">
  function InitMap()
  {
      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>
```
Zie het document Verificatie met Azure Kaarten voor meer informatie over verificatie met Azure Kaarten. Een lijst met voorbeelden die laten zien hoe u Azure Active Directory (AAD) integreert met Azure Kaarten vindt u hier.

Tip

In dit voorbeeld hebben we de van id de kaart <div> doorgegeven. Een andere manier om dit te doen, is door het HTMLElement object door te geven als de eerste document.getElementById('myMap') parameter.

Optioneel kan het handig zijn om de volgende elementen toe te meta voegen aan het element van de head pagina:

 <!-- 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">

Het HTML-bestand moet er als volgt uitzien:

 <!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>


     <script type="text/javascript">
         //Create an instance of the map control and set some options.
         function InitMap()
         {
             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>

     <style>
         html, body {
             margin: 0;
         }

         #myMap {
             height: 100vh;
             width: 100vw;
         }
     </style>
 </head>
 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>
 </html>

Open het bestand in uw webbrowser en bekijk de weergegeven kaart. Deze ziet eruit als in de onderstaande afbeelding:

Lokaliseren van de kaart

Azure Kaarten biedt twee verschillende manieren om de taal en regionale weergave voor de weergegeven kaart in te stellen. De eerste optie is om deze informatie toe te voegen aan de globale naamruimte, waardoor alle exemplaren van kaartbesturingselementen in uw app standaard deze atlas instellingen hebben. Met de volgende code stelt u de taal in op Frans ('fr-FR') en de regionale weergave op 'Auto':

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

De tweede optie is om deze informatie als deze door te geven aan de kaartopties bij het laden van de kaart:

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>'
    }
});

Notitie

Het is mogelijk om meerdere kaart-exemplaren op dezelfde pagina te laden met verschillende taal- en regio-instellingen. Daarnaast kunnen deze instellingen worden bijgewerkt nadat de kaart is geladen met behulp van setStyle de functie van de kaart.

Hier is een voorbeeld van Azure Kaarten met de taal ingesteld op 'fr-FR' en de regionale weergave ingesteld op 'Auto'.

Kaartafbeelding met labels in het Frans

Hier wordt een volledige lijst met ondersteunde talen en regionale weergaven beschreven.

Azure Government cloudondersteuning

De Azure Kaarten Web SDK ondersteunt de Azure Government cloud. Alle JavaScript- en CSS-URL's die worden gebruikt voor toegang tot de Azure Kaarten Web SDK blijven hetzelfde. De volgende taken moeten worden uitgevoerd om verbinding te maken met de Azure Government cloudversie van het Azure Kaarten platform.

Wanneer u het interactieve kaartbesturingselement gebruikt, voegt u de volgende regel code toe voordat u een exemplaar van de klasse Map maakt.

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

Zorg ervoor dat u Azure Kaarten verificatiegegevens van het Azure Government cloudplatform gebruikt bij het authenticeren van de kaart en services.

Wanneer u de servicesmodule gebruikt, moet het domein voor de services worden ingesteld bij het maken van een exemplaar van een API-URL-eindpunt. Met de volgende code wordt bijvoorbeeld een instantie van de klasse gemaakt en wordt het domein naar de SearchURL Azure Government cloud.

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

Als u rechtstreeks toegang hebt tot de Azure Kaarten REST-services, wijzigt u het URL-domein in atlas.azure.us . Als u bijvoorbeeld de zoek-API-service gebruikt, wijzigt u het URL-domein van https://atlas.microsoft.com/search/ in https://atlas.azure.us/search/ .

JavaScript-frameworks

Bij het ontwikkelen met behulp van een JavaScript-framework kan een van de volgende opensource-projecten nuttig zijn:

ng-azure-maps: Angular 10-wrapper rond Azure-kaarten.
AzureMapsControl.Components: een Azure Maps Blazor-onderdeel.
Azure Maps React-onderdeel: een react-wrapper voor het Azure Maps-besturingselement.
Vue Azure Maps: een Azure Maps-onderdeel voor de Vue-toepassing.