Azure Haritalar harita denetimini kullanma

Harita Denetimi istemci tarafı JavaScript kitaplığı, haritalar ve katıştırılmış Azure haritaları işlevlerini Web veya mobil uygulamanıza işletirmesini sağlar.

Bu belge, Azure Maps web SDK 'sını kullanır, ancak Azure haritalar Hizmetleri herhangi bir harita denetimiyle birlikte kullanılabilir. Azure haritalar ekibinin eklenti oluşturduğu bazı popüler açık kaynaklı harita denetimleri aşağıda verilmiştir.

Önkoşullar

Harita Denetimi bir Web sayfasında kullanmak için aşağıdaki önkoşulların birine sahip olmanız gerekir:

Web sayfasında yeni eşleme oluşturma

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

  1. Yeni bir HTML dosyası oluşturun.

  2. Azure Haritalar Web SDK 'sını yükleyin. İki seçenekten birini belirleyebilirsiniz:

    • HTML dosyasının öğesinde JavaScript ve stil sayfasına başvurular ekleyerek Azure Maps web SDK 'sının küresel olarak barındırılan CDN sürümünü kullanın <head> :

      <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 Web SDK kaynak kodunu Azure-Maps-Control NPM paketini kullanarak yerel olarak yükleyin ve uygulamanızla birlikte barındırın. Bu paket TypeScript tanımlarını da içerir.

      NPM Install Azure-Maps-Control

    Ardından, Azure Maps stil sayfasına başvuruları <head> dosyanın öğesine ekleyin:

    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    

    Not

    Aşağıdaki kod eklenerek TypeScript tanımları uygulamanıza aktarılabilir:

    import * as atlas from 'azure-maps-control';
    
  3. Haritayı sayfanın tam gövdesini dolduracak şekilde işlemek için aşağıdaki <style> öğesini <head> öğesine ekleyin.

     <style>
         html, body {
             margin: 0;
         }
    
         #myMap {
             height: 100vh;
             width: 100vw;
         }
     </style>
    
  4. Sayfanın gövdesinde bir <div> öğe ekleyin ve bunu id myMap' den verin.

     <body onload="InitMap()">
         <div id="myMap"></div>
     </body>
    
  5. Şimdi harita denetimini başlatacağız. Denetimin kimliğini doğrulamak için bir Azure Maps abonelik anahtarınız olması veya kimlik doğrulama seçenekleriyleAzure ACTIVE DIRECTORY (AAD) kimlik bilgileri kullanmanız gerekir.

    Kimlik doğrulaması için bir abonelik anahtarı kullanıyorsanız, aşağıdaki betik öğesini kopyalayın ve <head> öğesinin içine ve ilk öğenin altına yapıştırın <script> . <Your Azure Maps Key>Azure haritalar birincil abonelik anahtarınızla değiştirin.

    <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ın ve <head> öğesinin içine ve ilk öğenin altına yapıştırın <script> .

    <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ğrulama hakkında daha fazla bilgi için bkz. Azure Maps Ile kimlik doğrulama belgesi. Ayrıca, Azure Active Directory (AAD) Azure eşlemeleriyle nasıl tümleştirileceğini gösteren örneklerin listesi buradabulunabilir.

    İpucu

    Bu örnekte, eşlemenin ' de geçirdik id <div> . Bunu yapmanın bir diğer yolu, HTMLElement ilk parametre olarak geçirerek nesneyi geçirmektir document.getElementById('myMap') .

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

     <!-- 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">
    
  7. Hepsini birlikte koymak, HTML dosyanız aşağıdaki işarettekine benzer bir şekilde görünmelidir:

     <!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>
    
  8. Web tarayıcınızda dosyasını açın ve işlenmiş Haritayı görüntüleyin. Aşağıdaki görüntü gibi görünmelidir:

    İşlenen sonucu gösteren harita resmi

<a name="localizing-the-map">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 denetim örneklerinin bu ayarları varsayılan olarak alacak şekilde sonuçlanır. Aşağıdaki dil, dili Fransızca ("fr-FR") ve bölgesel görünüm olarak "Auto" olarak ayarlar:

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

İkinci seçenek, eşleme şu şekilde yüklenirken bu bilgileri eşleme seçeneklerine iletmektir:

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ı sayfada farklı dil ve bölge ayarlarıyla birden çok eşleme örneği yüklemek mümkündür. Buna ek olarak, bu ayarlar haritanın işlevi kullanılarak yüklendikten sonra da güncelleştirilemeyebilir setStyle .

Aşağıda, dil "fr-FR" olarak ayarlanan ve bölgesel görünüm "Auto" olarak ayarlanmış bir Azure Maps örneği verilmiştir.

Fransızca 'da etiketleri gösteren harita resmi

Desteklenen dillerin ve bölgesel görünümlerin tamamen listesi buradabelgelenmiştir.

Azure Kamu bulut desteği

Azure Haritalar Web SDK 'Sı, Azure Kamu Bulutu 'nı destekler. Azure Maps 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 harita denetimini kullanırken, sınıfının bir örneğini oluşturmadan önce aşağıdaki kod satırını ekleyin Map .

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

Harita ve hizmetlerin kimliğini doğrularken Azure 'un kimlik doğrulama ayrıntılarını Azure Kamu bulut platformunda kullandığınızdan emin olun.

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

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

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

JavaScript çerçeveleri

Bir JavaScript çerçevesi kullanılarak geliştirilirken, aşağıdaki açık kaynaklı projelerden biri yararlı olabilir:

Sonraki adımlar

Bir harita oluşturmayı ve bununla nasıl etkileşime gireceğini öğrenin:

Bir haritanın stilini nasıl ayarlayacağınızı öğrenin:

En iyi uygulamaları öğrenin ve örnekleri inceleyin:

Azure Active Directory (AAD) Azure Maps ile nasıl tümleştirileceğini gösteren örneklerin listesi için bkz.: