Azure Haritalar harita denetimini kullanma

Makale
11/03/2021
Okumak için 5 dakika

İstemci Harita Denetimi JavaScript kitaplığı, haritaları ve tümleşik Azure Haritalar işlevlerini web veya mobil uygulamanıza işlemenizi sağlar.

Bu belge Azure Haritalar Web SDK'sını kullanır, ancak Azure Haritalar hizmetleri herhangi bir harita denetimiyle kullanılabilir. İşte Azure Haritalar ekibinin oluşturduğu bazı popüler açık kaynak harita denetimleri.

Önkoşullar

Web sayfasında Harita Denetimi kullanmak için aşağıdaki önkoşullardan biri gerekir:

Bir Azure Haritalar hesabı olun ve birincil anahtarveya abonelik anahtarı olarak da bilinen bir birincil abonelik anahtarı alın.
Kimlik doğrulama Azure Active Directory kimlik AAD kimlik bilgilerinizi alın.

Web sayfasında yeni harita oluşturma

İstemci tarafı JavaScript kitaplığını kullanarak bir web Harita Denetimi harita ekleyebilirsiniz.

Yeni bir HTML dosyası oluşturun.
Azure Web SDK'Haritalar yükleyin. İki seçenek arasında seçim yapabilirsiniz:
- HTML dosyasının öğesinde JavaScript CDN başvurular ekleyerek Azure Haritalar Web SDK'sı'nın genel olarak barındırılan CDN sürümünü <head> kullanın:
```
<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>
```
- Azure haritalar Haritalar NPM paketini kullanarak Web SDK'sı kaynak kodunu yerel olarak yükleyin ve uygulamanıza barındırın. Bu paket, TypeScript tanımlarını da içerir.
  
  npm install azure-maps-control
Ardından Azure Haritalar öğesine başvurular <head> ekleyin:
```
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
```
Not

Typescript tanımları aşağıdaki kodu ekleyerek uygulamanıza aktarabilirsiniz:
```
import * as atlas from 'azure-maps-control';
```

Haritayı sayfanın tam gövdeyi dolduracak şekilde işlemek için öğesine aşağıdaki <style> öğeyi <head> ekleyin.

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

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

Sayfanın gövdesine bir öğesi ekleyin <div> ve id myMap öğesini ekleyin.
```
 <body onload="InitMap()">
     <div id="myMap"></div>
 </body>
```
Şimdi harita denetimi başlatılmış olur. Denetimin kimliğini doğrulamak için bir Azure Haritalar abonelik anahtarına sahip olmak veya kimlik doğrulama seçenekleriyle Azure Active Directory (AAD) kimlik bilgilerini kullanabilirsiniz.

Kimlik doğrulaması için bir abonelik anahtarı kullanıyorsanız, aşağıdaki betik öğesini kopyalayıp öğesinin içine ve <head> ilk öğesinin altına <script> yapıştırın. yerine <Your Azure Maps Key> Azure Haritalar birincil abonelik anahtarınızı kullanın.
```
<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>
```
Kimlik doğrulaması için Azure Active Directory (AAD) kullanıyorsanız, aşağıdaki betik öğesini kopyalayıp öğesinin içine ve ilk öğenin <head> altına <script> yapıştırın.
```
<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>
```
Azure Haritalar ile kimlik doğrulaması hakkında daha fazla bilgi için Azure kimlik doğrulaması Haritalar bakın. Ayrıca, azure Azure Active Directory (AAD) ile Haritalar gösteren örneklerin listesi burada bulunabilir.

İpucu

Bu örnekte, eşlemenin üzerinden id <div> geçtik. Bunu yapmak için bir diğer yol da ilk parametre HTMLElement olarak document.getElementById('myMap') geçerek nesnesine geçmektir.

İsteğe bağlı olarak, sayfanın öğesine aşağıdaki öğeleri meta eklemeniz head yararlı olabilir:

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

Hepsini bir araya koyarak HTML dosyanız aşağıdaki işaretlemeye benzer şekilde görünmeli:

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

Dosyayı web tarayıcınızda açın ve işlenmiş haritayı görüntüleyebilirsiniz. Aşağıdaki görüntüye benzer şekilde görüntülenmiştir:

Haritayı yerelleştirme

Azure Haritalar, işlenen harita için dil ve bölgesel görünümü ayarlamanın iki farklı yolu sağlar. İlk seçenek, bu bilgileri genel ad alanına eklemektir. Bu, uygulamanıza ilişkin tüm eşleme denetimi örneklerinin varsayılan atlas olarak bu ayarlara sahip olmasıyla sonuç verir. Aşağıdakiler dili Fransızca ("fr-FR") ve bölgesel görünümü "Otomatik" olarak ayarlar:

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

İkinci seçenek, haritayı yüklerken bu bilgileri harita seçeneklerine şu şekilde geçmektir:

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

Not

Aynı sayfaya farklı dil ve bölge ayarlarıyla birden çok harita örneği yüklemek mümkündür. Ayrıca, bu ayarlar haritanın işlevi kullanılarak harita setStyle yüklendikten sonra güncelleştirilebilir.

Burada dil "fr-FR" Haritalar bölgesel görünüm ise "Otomatik" olarak ayarlanmış bir Azure hizmeti örneği ve açık ve net bir şekilde ele alalım.

Fransızca etiketleri gösteren harita resmi

Desteklenen dillerin ve bölgesel görünümlerin tam listesi burada belgelanmıştır.

Azure Kamu bulut desteği

Azure Haritalar Web SDK'sı, Azure Kamu destekler. Web SDK'sı azure uygulamasına erişmek için Haritalar JavaScript ve CSS URL'leri aynı kalır. Azure Haritalar platformunun Azure Kamu bulut sürümüne bağlanmak için aşağıdaki Haritalar gerekir.

Etkileşimli harita denetimi kullanırken sınıfının bir örneğini oluşturmadan önce aşağıdaki kod satırı Map ekleyin.

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

Harita ve hizmetlerin kimlik doğrulamasını Haritalar bulut platformundan Azure Azure Kamu kimlik doğrulaması ayrıntılarını kullanmaya emin olun.

Hizmetler modülü kullanılırken, API URL uç noktası örneği oluşturulurken hizmetlerin etki alanının ayarlanmış olması gerekir. Örneğin, aşağıdaki kod sınıfının bir örneğini oluşturur ve SearchURL etki alanını buluta Azure Kamu belirtir.

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

Rest hizmetleri için Azure Haritalar erişilirse URL etki alanını olarak atlas.azure.us değiştirebilirsiniz. Örneğin, arama API'si hizmetini kullanıyorsanız URL etki alanını yerine https://atlas.microsoft.com/search/ olarak https://atlas.azure.us/search/ değiştirebilirsiniz.