Использование модуля служб Azure Maps

Статья
04/07/2024

Веб-пакет SDK Azure Maps содержит модуль служб. Этот модуль является вспомогательной библиотекой, упрощающей работу служб REST Azure Maps в веб-приложениях и приложениях Node.js за счет использования JavaScript или TypeScript.

Примечание.

Прекращение использования модуля службы веб-пакета SDK для Azure Карты

Модуль службы веб-пакета SDK для Azure Карты теперь устарел и будет прекращен 9.30.26. Чтобы избежать сбоев в работе служб, рекомендуется перенести пакет REST SDK JavaScript на azure Карты 9.30.26. Дополнительные сведения см . в руководстве разработчиков REST SDK для JavaScript и TypeScript (предварительная версия).>

Использование модуля служб на веб-странице

Создайте HTML-файл.

Загрузите модуль служб Azure Maps. Это можно сделать одним из двух способов:
- Используйте глобально размещенную версию сети доставки содержимого Azure модуля служб Azure Maps. Добавьте ссылку скрипта в элемент <head> файла:
```
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
```
- Загрузите исходный код веб-пакета SDK Azure Maps локально с помощью пакета NPM azure-maps-rest и разместите его в приложении. Этот пакет также включает определения TypeScript. Используйте следующую команду:
  
  npm install azure-maps-rest
  
  Затем используйте объявление импорта для добавления модуля в исходный файл:
```
import * as service from "azure-maps-rest";
```

Создайте конвейер проверки подлинности. Перед тем, как инициализировать конечную точку клиента URL-адреса службы, необходимо создать конвейер. Используйте собственный ключ учетной записи Azure Карты или учетные данные Microsoft Entra для проверки подлинности клиента Карты служба Azure. В этом примере создается клиент URL-адреса служба .

Если для проверки подлинности используется ключ подписки:

// 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);

Если для проверки подлинности используется идентификатор Microsoft Entra:

// 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;
}

Дополнительные сведения см. в статье Проверка подлинности в Azure Maps.

В следующем коде используется созданный клиент URL-адреса службы "Поиск" Azure Maps для геокодирования адреса: "1 Microsoft Way, Redmond, WA". Код использует функцию searchAddress и выводит результаты в виде таблицы в тексте страницы.

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

Ниже приведен полный пример выполнения кода:

<html>
 <head>

  <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

  <script type="text/javascript">
    
    // Get an Azure Maps key at https://azure.com/maps.
    var subscriptionKey = '{Your-Azure-Maps-Subscription-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);

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

  </script>
</head>

<style>
  table {
    border: 1px solid black;
    border-collapse: collapse;
  }
  td, th {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<body> </body>

</html>

На следующем рисунке показан снимок экрана, на котором показаны результаты этого примера кода, таблица с адресом, для которого выполняется поиск, а также результирующих координат.

Снимок экрана: html-таблица с адресом, в которой выполняется поиск и полученные координаты.

Поддержка облака Azure для государственных организаций

Веб-пакет SDK Azure Maps поддерживает облако Azure для государственных организаций. Все URL-адреса JavaScript и CSS, используемые для доступа к веб-пакету SDK Карты Azure, остаются неизменными, однако для подключения Azure для государственных организаций к облачной версии azure Карты необходимо выполнить следующие задачи.

При использовании интерактивного элемента управления картой добавьте указанную ниже строку кода перед созданием экземпляра класса Map.

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

При проверке подлинности карт и служб обязательно используйте сведения о проверке подлинности Azure Maps на облачной платформе Azure для государственных организаций.

Домен для служб необходимо задать при создании экземпляра конечной точки URL-адреса API. Например, указанный ниже код позволяет создать экземпляр класса SearchURL и указать домен облака Azure для государственных организаций.

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

При прямом доступе к службам REST Azure Maps измените домен URL-адреса на atlas.azure.us. Например, при использовании службы API поиска измените домен URL-адреса с https://atlas.microsoft.com/search/ на https://atlas.azure.us/search/.

Следующие шаги

Дополнительные сведения о классах и методах, которые используются в этой статье:

MapsURL

SearchURL

RouteURL

SubscriptionKeyCredential

TokenCredential

Дополнительные примеры кода с использованием модуля служб см. в статьях:

Отображение результатов поиска на карте

Получение сведений на основе координат

Отображение направлений от точки А до точки Б

Использование модуля служб Azure Maps

Использование модуля служб на веб-странице

Поддержка облака Azure для государственных организаций

Следующие шаги

Дополнительные ресурсы