Azure Haritalar harita denetimini kullanma

Makale
11/29/2022
Okumak için 5 dakika

Harita Denetimi istemci tarafı JavaScript kitaplığı, haritaları ve ekli Azure Haritalar işlevlerini web veya mobil uygulamanıza işlemenize olanak tanır.

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

Önkoşullar

Web sayfasında Harita Denetimi'ni kullanmak için aşağıdaki önkoşullardan birine sahip olmanız gerekir:

bir Azure Haritalar hesabı yapın ve birincil anahtar veya abonelik anahtarı olarak da bilinen bir birincil abonelik anahtarı alın.
Kimlik doğrulama seçenekleriyle Azure Active Directory (AAD) kimlik bilgilerinizi alın.

Web sayfasında yeni harita oluşturma

Harita Denetimi istemci tarafı JavaScript kitaplığını kullanarak bir web sayfasına harita ekleyebilirsiniz.

Yeni bir HTML dosyası oluşturun.
Azure Haritalar Web SDK'sını yükleyin. İki seçenek arasından birini belirleyebilirsiniz:
- HTML dosyasının öğesindeki JavaScript'e ve stil sayfasına başvuru ekleyerek Azure Haritalar Web SDK'sının genel olarak barındırılan <head> CDN sürümünü 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-maps-control NPM paketini kullanarak Azure Haritalar Web SDK'sı kaynak kodunu yerel olarak yükleyin ve uygulamanızla barındırın. Bu paket, TypeScript tanımlarını da içerir.
  
  npm install azure-maps-control
Ardından dosyanın öğesine Azure Haritalar stil sayfasına <head> başvurular 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 kod eklenerek uygulamanıza aktarılabilir:
```
import * as atlas from 'azure-maps-control';
```

Eşlemeyi sayfanın tüm gövdesini dolduracak şekilde işlemek için aşağıdaki öğeyi <head> öğesine ekleyin<style>.

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

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

Sayfanın gövdesine bir <div> öğe ekleyin ve myMap'iid verin.

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

Şimdi harita denetimini başlatacağız. Denetimin kimliğini doğrulamak için bir Azure Haritalar abonelik anahtarına sahip olmanız veya kimlik doğrulama seçenekleriyle Azure Active Directory (AAD) kimlik bilgilerini kullanmanız gerekir.

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

İpucu

Bu örnekte, öğesinin eşlemesini <div>geçtikid. Bunu yapmak için bir diğer yol da HTMLElement ilk parametre olarak geçirerekdocument.getElementById('myMap') nesnesini geçirmektir.

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

 <!-- 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 getirin, HTML dosyanız aşağıdaki işaretlemeye benzer olmalıdı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>

Dosyayı web tarayıcınızda açın ve işlenmiş haritayı görüntüleyin. Aşağıdaki görüntü gibi görünmelidir:

Haritayı yerelleştirme

Azure Haritalar, işlenen harita için dili ve bölgesel görünümü ayarlamanın iki farklı yolunu sağlar. İlk seçenek, bu bilgileri genel atlas ad alanına eklemektir; bu da uygulamanızdaki tüm harita denetimi örneklerinin varsayılan olarak bu ayarları seçmesine neden olur. Aşağıdakiler dili Fransızca ("fr-FR") ve bölgesel görünümü "Auto" olarak ayarlar:

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

İkinci seçenek, haritayı yüklerken bu bilgileri harita seçeneklerine geçirmektir:

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

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

Dil "fr-FR" ve bölgesel görünüm "Otomatik" olarak ayarlanmış bir Azure Haritalar örneği aşağıda verilmiştir.

Fransızca etiketleri gösteren harita resmi

Desteklenen dillerin ve bölgesel görünümlerin tam listesi burada belgelenmiştir.

Azure Kamu bulut desteği

Azure Haritalar Web SDK'sı Azure Kamu bulutunu destekler. Azure Haritalar Web SDK'sına erişmek için kullanılan tüm 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 görevlerin yapılması gerekir.

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

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

Haritanın ve hizmetlerin kimliğini doğrularken Azure Kamu bulut platformundan Azure Haritalar kimlik doğrulama ayrıntılarını kullandığınızdan emin olun.

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

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

Azure Haritalar REST hizmetlerine doğrudan erişiyorsa, URL etki alanını olarak atlas.azure.usdeğiştirin. Örneğin, arama API'si hizmetini kullanıyorsanız URL etki alanını olarak https://atlas.microsoft.com/search/https://atlas.azure.us/search/değiştirin.

JavaScript çerçeveleri

JavaScript çerçevesi kullanarak geliştirme gerçekleştiriliyorsa, aşağıdaki açık kaynak projelerden biri yararlı olabilir:

ng-azure-maps - Azure haritalar çevresinde 10 sarmalayıcı Angular.
AzureMapsControl.Components - Bir Azure Haritalar Blazor bileşeni.
Azure Haritalar React Bileşeni - Azure Haritalar denetimi için bir react sarmalayıcı.
Vue Azure Haritalar - Vue uygulaması için Azure Haritalar bileşeni.