Azure Haritalar hizmetleri modülünü kullanma

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

Azure Haritalar Web SDK'sı bir hizmet modülü sağlar. Bu modül, JavaScript veya TypeScript kullanarak Azure Haritalar REST hizmetlerini web veya Node.js uygulamalarında kullanmayı kolaylaştıran bir yardımcı kitaplıktır.

Web sayfasında hizmetler modülünü kullanma

Yeni bir HTML dosyası oluşturun.
Azure Haritalar hizmetleri modülünü yükleme. Bunu iki şekilde yükleyebilirsiniz:
- Azure Haritalar services modülünün genel olarak barındırılan Azure Content Delivery Network sürümünü kullanın. Dosyanın öğesine bir <head> betik başvurusu ekleyin:
```
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
```
- Alternatif olarak, azure-maps-rest npm paketini kullanarak Azure Haritalar Web SDK'sı kaynak kodu için hizmetler modülünü yükleyin ve ardından uygulamanıza barındırın. Bu paket, TypeScript tanımlarını da içerir. Şu komutu çalıştırın:
  
  npm install azure-maps-rest
  
  Ardından, dosyanın öğesine bir <head> betik başvurusu ekleyin:
```
<script src="node_modules/azure-maps-rest/dist/atlas-service.min.js"></script>
```

Kimlik doğrulama işlem hattı oluşturun. Hizmet URL'si istemci uç noktasını başlatamadan önce işlem hattının oluşturulmuş olması gerekir. Azure Haritalar Arama hizmeti istemcisinin kimliğini doğrulamak için kendi Azure Haritalar anahtarınızı veya Azure Active Directory (Azure AD) kimlik Haritalar Arama hizmeti kullanın. Bu örnekte, Arama hizmeti URL istemcisi oluşturulur.

Kimlik doğrulaması için abonelik anahtarı kullanıyorsanız:

// Get an Azure Maps key at https://azure.com/maps.
var subscriptionKey = '<Your Azure Maps Key>';

// Use SubscriptionKeyCredential with a subscription key.
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(subscriptionKey);

// Use subscriptionKeyCredential to create a pipeline.
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, {
  retryOptions: { maxTries: 4 } // Retry options
});

// Create an instance of the SearchURL client.
var searchURL = new atlas.service.SearchURL(pipeline);

Kimlik doğrulaması için Azure AD kullanıyorsanız:

// Enter your Azure AD client ID.
var clientId = "<Your Azure Active Directory Client Id>";

// Use TokenCredential with OAuth token (Azure AD or Anonymous).
var aadToken = await getAadToken();
var tokenCredential = new atlas.service.TokenCredential(clientId, aadToken);

// Create a repeating time-out that will renew the Azure AD token.
// This time-out must be cleared when the TokenCredential object is no longer needed.
// If the time-out is not cleared, the memory used by the TokenCredential will never be reclaimed.
var renewToken = async () => {
  try {
    console.log("Renewing token");
    var token = await getAadToken();
    tokenCredential.token = token;
    tokenRenewalTimer = setTimeout(renewToken, getExpiration(token));
  } catch (error) {
    console.log("Caught error when renewing token");
    clearTimeout(tokenRenewalTimer);
    throw error;
  }
}
tokenRenewalTimer = setTimeout(renewToken, getExpiration(aadToken));

// Use tokenCredential to create a pipeline.
var pipeline = atlas.service.MapsURL.newPipeline(tokenCredential, {
  retryOptions: { maxTries: 4 } // Retry options
});

// Create an instance of the SearchURL client.
var searchURL = new atlas.service.SearchURL(pipeline);

function getAadToken() {
  // Use the signed-in auth context to get a token.
  return new Promise((resolve, reject) => {
    // The resource should always be https://atlas.microsoft.com/.
    const resource = "https://atlas.microsoft.com/";
    authContext.acquireToken(resource, (error, token) => {
      if (error) {
        reject(error);
      } else {
        resolve(token);
      }
    });
  })
}

function getExpiration(jwtToken) {
  // Decode the JSON Web Token (JWT) to get the expiration time stamp.
  const json = atob(jwtToken.split(".")[1]);
  const decode = JSON.parse(json);

  // Return the milliseconds remaining until the token must be renewed.
  // Reduce the time until renewal by 5 minutes to avoid using an expired token.
  // The exp property is the time stamp of the expiration, in seconds.
  const renewSkew = 300000;
  return (1000 * decode.exp) - Date.now() - renewSkew;
}

Daha fazla bilgi için bkz. Azure kimlik doğrulaması Haritalar.

Aşağıdaki kod, yeni oluşturulan Azure Haritalar Arama hizmeti URL istemcisini kullanarak adresi coğrafi olarak kodlar: "1 Microsoft Way, Redmond, WA". Kod işlevini searchAddress kullanır ve sonuçları sayfanın gövdesinde tablo olarak görüntüler.

// Search for "1 microsoft way, redmond, wa".
searchURL.searchAddress(atlas.service.Aborter.timeout(10000), '1 microsoft way, redmond, wa')
  .then(response => {
    var html = [];

    // Display the total results.
    html.push('Total results: ', response.summary.numResults, '<br/><br/>');

    // Create a table of the results.
    html.push('<table><tr><td></td><td>Result</td><td>Latitude</td><td>Longitude</td></tr>');

    for(var i=0;i<response.results.length;i++){
      html.push('<tr><td>', (i+1), '.</td><td>', 
        response.results[i].address.freeformAddress, 
        '</td><td>', 
        response.results[i].position.lat,
        '</td><td>', 
        response.results[i].position.lon,
        '</td></tr>');
    }

    html.push('</table>');

    // Add the resulting HTML to the body of the page.
    document.body.innerHTML = html.join('');
});

Tam, çalışan kod örneği şu şekildedir:

Azure Kamu bulut desteği

Azure Haritalar Web SDK'sı, Azure Kamu destekler. Azure Haritalar Web SDK'sı'na erişmek için kullanılan tüm JavaScript ve CSS URL'leri aynı kalır, ancak 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 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 kimliklerini doğrularken 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şirken 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 olarak https://atlas.microsoft.com/search/ https://atlas.azure.us/search/ değiştirebilirsiniz.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi bulabilirsiniz:

MapsURL

SearchURL

Routeurl

SubscriptionKeyCredential

TokenCredential

Services modülünü kullanan daha fazla kod örneği için şu makalelere bakın:

Arama sonuçlarını haritada gösterme

Bir koordinattan bilgi alma

A'dan B'ye yönleri gösterme

Azure Haritalar hizmetleri modülünü kullanma

Lütfen deneyiminizi değerlendirin

Web sayfasında hizmetler modülünü kullanma

Azure Kamu bulut desteği

Sonraki adımlar