Använda kartkontrollen i Azure Maps

Artikel
03/23/2023
5 minuter för att läsa

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

Den här dokumentationen använder Azure Maps Web SDK, men de Azure Maps tjänsterna kan användas med valfri kartkontroll. Här är några populära kartkontroller med öppen källkod som Azure Maps-teamet har skapat plugin-program för.

Förutsättningar

Om du vill använda kartkontrollen på en webbsida måste du ha något av följande krav:

Ett Azure Maps konto
En prenumerationsnyckel
Hämta dina autentiseringsuppgifter för Azure Active Directory (AAD) med autentiseringsalternativ

Skapa en ny karta på en webbsida

Du kan bädda in en karta på en webbsida med hjälp av JavaScript-biblioteket map control på klientsidan.

Skapa en ny HTML-fil.
Läs in i Azure Maps Web SDK. Du kan välja något av två alternativ:
- Använd den globalt värdbaserade CDN-versionen av Azure Maps Web SDK genom att lägga till referenser till JavaScript och formatmallen <head> i HTML-filens element:
```
<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 Maps Web SDK-källkoden lokalt med npm-paketet azure-maps-control och var värd för det med din app. Det här paketet innehåller även TypeScript-definitioner.
  
  npm install azure-maps-control
Lägg sedan till referenser till Azure Maps formatmall till -elementet <head> 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 återge kartan så att den fyller hela sidans brödtext lägger du till följande <style> 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 idmyMap.
```
 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>
```
Nu initierar vi kartkontrollen. För att kunna autentisera kontrollen måste du antingen äga en Azure Maps prenumerationsnyckel eller använda autentiseringsuppgifter för Azure Active Directory (AAD) med autentiseringsalternativ.

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

Tips

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

Alternativt kan det vara bra att lägga till följande meta element i elementet head 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">

Om 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 Maps finns två olika sätt att ange 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 atlas namnområdet, vilket resulterar i att alla kartkontrollinstanser i din app använder de här inställningarna som standard. 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 regioninställningar. Dessutom kan de här inställningarna uppdateras när kartan har lästs in med hjälp setStyle av kartans funktion.

Här är ett exempel på Azure Maps 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 här.

Azure Government molnsupport

Azure Maps Web SDK stöder Azure Government molnet. Alla JavaScript- och CSS-URL:er som används för att komma åt Azure Maps Web SDK förblir desamma. Följande uppgifter måste utföras för att ansluta till den Azure Government molnversionen av Azure Maps-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 Maps autentiseringsinformation från Azure Government molnplattform 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 till Azure Government molnet.

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

Om du har direktåtkomst till Azure Maps 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 från https://atlas.microsoft.com/search/ till https://atlas.azure.us/search/.