Använda kartkontrollen i Azure Maps

Artikel
11/03/2021
5 minuter för att läsa

Med Kartkontroll JavaScript-biblioteket på klientsidan kan du rendera kartor och inbäddade Azure Kartor funktioner i ditt webb- eller mobilprogram.

I den här dokumentationen används Azure Kartor Web SDK, men Azure Kartor kan användas med valfri kartkontroll. Här är några populära kartkontroller med öppen källkod som Azure Kartor har skapat plugin-program för.

Förutsättningar

Om du Kartkontroll på en webbsida måste du ha något av följande krav:

Skapa ett Azure Kartor-konto och skaffa en primär prenumerationsnyckel, även kallat primärnyckel eller prenumerationsnyckel.
Hämta dina Azure Active Directory (AAD) autentiseringsuppgifter med autentiseringsalternativen.

Skapa en ny karta på en webbsida

Du kan bädda in en karta på en webbsida med hjälp Kartkontroll JavaScript-bibliotek på klientsidan.

Skapa en ny HTML-fil.
Läs in i Azure Kartor Web SDK. Du kan välja något av två alternativ:
- Använd den globalt värdbaserade CDN av Azure Kartor Web SDK genom att lägga till referenser till JavaScript och formatmallen i -elementet i <head> HTML-filen:
```
<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>
```
- Läs in Azure Kartor Web SDK-källkoden lokalt med hjälp av NPM-paketet azure-maps-control och använd din app som värd. Det här paketet innehåller även TypeScript-definitioner.
  
  npm install azure-maps-control
Lägg sedan till referenser till Azure Kartor-formatmallen <head> till -elementet i filen:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
```
Anteckning

Typescript-definitioner kan importeras till ditt program genom att lägga till följande kod:
```
import * as atlas from 'azure-maps-control';
```

Om du vill rendera kartan så att den fyller hela sidans brödtext lägger du till <style> följande element i elementet <head> .

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

     #myMap {
         height: 100vh;
         width: 100vw;
     }
 </style>

I brödtexten på sidan lägger du till ett <div> -element och ger det en id av myMap.
```
 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>
```
Nu initierar vi kartkontrollen. För att autentisera kontrollen måste du antingen äga en Azure Kartor-prenumerationsnyckel eller använda autentiseringsuppgifter Azure Active Directory (AAD) med autentiseringsalternativ.

Om du använder en prenumerationsnyckel för autentisering kopierar du och klistrar in följande skriptelement i <head> elementet och under det första <script> elementet. Ersätt <Your Azure Maps Key> med din azure Kartor primär prenumerationsnyckel.
```
<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>
```
Om du använder Azure Active Directory (AAD) för autentisering kopierar och klistrar du in följande skriptelement i elementet och <head> under det första <script> elementet.
```
<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>
```
Mer information om autentisering med Azure Kartor finns i dokumentet Autentisering med Azure Kartor. En lista över exempel som visar hur du integrerar Azure Active Directory (AAD) med Azure Kartor finns här.

Tips

I det här exemplet har vi passerat i id på kartan <div> . Ett annat sätt att göra detta är att skicka in HTMLElement objektet genom att skicka som den första document.getElementById('myMap') parametern.

Om du vill kan det vara bra att lägga till meta följande element head i -elementet på sidan:

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

När du sätter ihop allt bör HTML-filen se ut ungefär så här:

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

Öppna filen i webbläsaren och visa den renderade kartan. Det bör se ut som på bilden nedan:

Lokalisera kartan

Azure Kartor tillhandahåller två olika sätt att ställa in språkvyn och den regionala vyn för den renderade kartan. Det första alternativet är att lägga till den här informationen i det globala namnområdet, vilket resulterar i att alla map-kontrollinstanser i din app som atlas standard använder dessa inställningar. Följande anger språket till franska ("fr-FR") och den regionala vyn till "Auto":

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

Det andra alternativet är att skicka den här informationen till kartalternativen när du läser in kartan så här:

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

Anteckning

Det går att läsa in flera kartinstanser på samma sida med olika språk- och regionsinställningar. Dessutom kan de här inställningarna uppdateras när kartan har läses in med setStyle hjälp av funktionen för kartan.

Här är ett exempel på Azure Kartor med språket inställt på "fr-FR" och den regionala vyn inställd på "Auto".

Kartbild som visar etiketter på franska

En fullständig lista över språk och regionala vyer som stöds finns dokumenterad här.

Azure Government molnstöd

Azure Kartor Web SDK stöder Azure Government molnet. Alla JavaScript- och CSS-URL:er som används för att komma åt Azure Kartor Web SDK förblir desamma. Följande uppgifter måste utföras för att ansluta till den Azure Government molnversionen av Azure Kartor plattformen.

När du använder den interaktiva kartkontrollen lägger du till följande kodrad innan du skapar en instans av Map klassen .

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

Se till att använda Azure Kartor autentiseringsinformation från Azure Government-molnplattformen när du autentiserar kartan och tjänsterna.

När du använder tjänstmodulen måste domänen för tjänsterna anges när du skapar en instans av en API-URL-slutpunkt. Följande kod skapar till exempel en instans av SearchURL klassen och pekar domänen mot Azure Government molnet.

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

Om du har direkt åtkomst till Azure Kartor REST-tjänster ändrar du URL-domänen till atlas.azure.us . Om du till exempel använder sök-API-tjänsten ändrar du URL-domänen https://atlas.microsoft.com/search/ från till https://atlas.azure.us/search/ .