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

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

Замечание

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

Модуль службы веб-SDK Azure Maps устарел и будет выведен из эксплуатации 30.09.2026. Чтобы избежать сбоев в работе служб, мы рекомендуем перейти на REST SDK JavaScript для Azure Maps до 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 Maps или учетные данные Microsoft Entra для проверки подлинности клиента службы поиска Azure Maps. В этом примере создается клиент 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".

Следующий код использует только что созданный КЛИЕНТ службы поиска 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 Maps, остаются одинаковыми, однако для подключения к облачной версии Azure Maps необходимо выполнить следующие задачи.

При использовании интерактивного элемента управления картой добавьте указанную ниже строку кода перед созданием экземпляра класса 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

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

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

Получить информацию о координате

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-04-17