Použití mapového ovládacího prvku Azure Maps

Článek
11/03/2021
5 min ke čtení

Knihovna Ovládací prvek Mapa JavaScript na straně klienta umožňuje vykreslovat mapy a vložené funkce Azure Mapy do webové nebo mobilní aplikace.

Tato dokumentace používá sadu Azure Mapy Web SDK, ale služby Azure Mapy je možné použít s libovolným mapový ovládací prvek. Tady jsou některé oblíbené open source ovládací prvky mapy, pro které tým azure Mapy vytvořil modul plug-in.

Požadavky

Pokud chcete Ovládací prvek Mapa webové stránce, musíte mít jeden z následujících požadavků:

Vytvořte si účet Azure Mapy a získejte primární klíč předplatného, označované také jako primární klíč nebo klíč předplatného.
Získejte přihlašovací Azure Active Directory (AAD) s možnostmi ověřování.

Vytvoření nové mapy na webové stránce

Mapu můžete vložit na webovou stránku pomocí knihovny JavaScript Ovládací prvek Mapa na straně klienta.

Vytvořte nový soubor HTML.
Načtěte do sady Azure Mapy Web SDK. Můžete zvolit jednu ze dvou možností:
- Použijte globálně hostovanou CDN sady Azure Mapy Web SDK přidáním odkazů na JavaScript a šablony stylů v elementu <head> souboru HTML:
```
<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>
```
- Načtěte zdrojový kód sady Azure Mapy Web SDK místně pomocí balíčku NPM azure-maps-control a hostte ho v aplikaci. Tento balíček obsahuje také definice TypeScriptu.
  
  npm install azure-maps-control
Pak přidejte odkazy na Mapy šablony stylů Azure do <head> elementu souboru:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
```
Poznámka

Definice typescriptu je možné importovat do aplikace přidáním následujícího kódu:
```
import * as atlas from 'azure-maps-control';
```

Chcete-li vykreslit mapu tak, aby vyplnil celý text stránky, přidejte do <style> elementu následující <head> prvek.

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

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

V těle stránky přidejte element a <div> dejte mu hodnotu id myMap.

 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>

Teď inicializujeme ovládací prvek mapy. Abyste mohli ovládací prvek ověřit, musíte buď vlastnit klíč předplatného Azure Mapy, nebo použít přihlašovací údaje Azure Active Directory (AAD) s možnostmi ověřování.

Pokud k ověřování používáte klíč předplatného, zkopírujte a vložte následující element skriptu do elementu a pod <head> první <script> prvek. Nahraďte <Your Azure Maps Key> svým primárním Mapy předplatného Azure.
```
<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>
```
Pokud pro ověřování používáte Azure Active Directory (AAD), zkopírujte a vložte následující element script do elementu a pod <head> první <script> prvek.
```
<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>
```
Další informace o ověřování pomocí Azure Mapy najdete v dokumentu Ověřování pomocí Azure Mapy. Seznam ukázek, které ukazují, jak integrovat Azure Active Directory (AAD) s Azure Mapy najdete tady.

Tip

V tomto příkladu jsme předli v mapování id <div> . Dalším způsobem, jak to provést, je předat HTMLElement objekt předáním document.getElementById('myMap') jako první parametr.

Volitelně může být užitečné přidat do elementu stránky meta head následující prvky:

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

Když to všechno dáte dohromady, měl by soubor HTML vypadat podobně jako následující kód:

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

Otevřete soubor ve webovém prohlížeči a zobrazte vykreslenou mapu. Měl by vypadat jako na následujícím obrázku:

Lokalizace mapy

Azure Mapy nabízí dva různé způsoby nastavení jazyka a regionálního zobrazení pro vykreslenou mapu. První možností je přidat tyto informace do globálního oboru názvů, což bude mít za následek, že všechny instance ovládacího prvku mapování ve vaší aplikaci budou mít výchozí atlas nastavení. Následující kód nastaví jazyk na francouzštinu ("fr-FR") a regionální zobrazení na "Auto":

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

Druhou možností je předat tyto informace do možností mapy při načítání mapy, jako je tato:

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

Poznámka

Na stejné stránce je možné načíst více instancí mapování s různým nastavením jazyka a oblasti. Kromě toho je možné tato nastavení aktualizovat po načtení mapy setStyle pomocí funkce mapy.

Tady je příklad služby Azure Mapy jazykem nastaveným na fr-FR a regionálním zobrazením nastaveným na Hodnotu Auto.

Obrázek mapy zobrazující popisky ve francouzštině

Úplný seznam podporovaných jazyků a regionálních zobrazení je zdokumentovaný tady.

Azure Government podpory cloudu

Sada Azure Mapy Web SDK podporuje Azure Government cloud. Všechny adresy URL JavaScriptu a CSS používané pro přístup k Azure Mapy Web SDK zůstávají stejné. Aby bylo možné připojit se ke cloudové Azure Government Azure Mapy azure, je potřeba provést následující úlohy.

Při použití interaktivního ovládacího prvku mapy přidejte před vytvořením instance třídy následující Map řádek kódu.

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

Při ověřování mapy a Mapy nezapomeňte použít azure Azure Government ověřování z cloudové platformy.

Při použití modulu služeb je potřeba nastavit doménu pro služby při vytváření instance koncového bodu adresy URL rozhraní API. Například následující kód vytvoří instanci třídy a odkazuje doménu na SearchURL Azure Government cloudu.

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

Pokud máte přímý přístup ke službám Azure Mapy REST, změňte doménu adresy URL na atlas.azure.us . Pokud například používáte vyhledávací službu API, změňte doménu adresy URL z https://atlas.microsoft.com/search/ na https://atlas.azure.us/search/ .