Краткое руководство. Создание интерактивной карты поиска с помощью Azure Карты

В этом кратком руководстве показано, как использовать Azure Карты для создания карты, которая предоставляет пользователям интерактивный интерфейс поиска. В этом руководстве описывается:

• создание учетной записи службы Azure Maps;
• Получите ключ подписки azure Карты для использования в демонстрационном веб-приложении.
• Скачайте и откройте демоверсию приложения карт.

Для работы с этим кратким руководством используется веб-пакет SDK Azure Maps, но службу Azure Maps можно использовать с любыми элементами управления картой, такими как популярные элементы управления картой с открытым кодом, для которых команда Azure Maps создала подключаемый модуль.

Необходимые компоненты

• Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

• Войдите на портал Azure.

Создайте учетную запись службы Azure Maps.

Создайте учетную запись службы Azure Maps с помощью приведенных ниже действий.

1. Щелкните значок Создать ресурс в верхнем левом углу окна портала Azure.

2. Введите Azure Maps в поле Службы поиска и Marketplace.

3. В появившемся раскрывающемся списке выберите Azure Maps, а затем нажмите кнопку Создать.

4. На странице Создание ресурса учетной записи Azure Maps введите следующие значения, после чего нажмите кнопку Создать:

   • Подписку, которую необходимо использовать для этой учетной записи.
   • Имя группы ресурсов для этой учетной записи. Вы можете Создать новую или Использовать существующую группу ресурсов.
   • Имя новой учетной записи Azure Maps.
   • Ценовая категория этой учетной записи. Выберите Gen2 (2-е поколение).
   • Ознакомьтесь с лицензией и заявлением о конфиденциальности, а затем установите флажок, чтобы принять условия соглашения.

   

Получение ключа подписки для учетной записи.

После успешного создания учетной записи Azure Карты получите ключ подписки, который позволяет запрашивать API Карты.

1. Откройте учетную запись службы "Карты Azure" на портале.
2. В разделе "Параметры" выберите Проверка подлинности.
3. Скопируйте первичный ключ и сохраните его локально, чтобы использовать далее в этом руководстве.

Скачивание и обновление демоверсии Azure Maps

1. Скопируйте содержимое файла: интерактивный поиск quickstart.html.
2. Сохраните его локально как файл AzureMapDemo.html. Откройте в текстовом редакторе.
3. Добавьте значение первичного ключа, которое вы получили в предыдущем разделе
   1. Закомментируйте весь код в authOptions функции, этот код используется для проверки подлинности Microsoft Entra.
   2. Раскомментируйте последние две строки в функции authOptions. Этот код используется для проверки подлинности с помощью общего ключа и подхода, используемого в этом кратком руководстве.
   3. Замените <Your Azure Maps Key> значением ключа подписки из предыдущего раздела.

Открытие демонстрационной версии приложения

1. Откройте файл AzureMapDemo.html в браузере на свой выбор.

2. Просмотрите карту Лос-Анджелеса. Измените масштаб карты, чтобы посмотреть, как автоматически отрисовывается карта, отображая больше или меньше информации в зависимости от масштаба.

3. Измените центр карты по умолчанию. В файле AzureMapDemo.html найдите переменную center. Замените пару значений longitute и latitude для этой переменной новыми значениями: [-74.0060, 40.7128]. Сохраните файл и обновите страницу в браузере.

4. Проверьте, как работает интерактивный поиск. В поле поиска в левом верхнем углу демоверсии веб-приложения найдите restaurants.

5. Наведите указатель мыши на список адресов и расположений под полем поиска. Обратите внимание на то, как над соответствующим маркером на карте всплывают сведения об этом расположении. Для обеспечения конфиденциальности частных компаний отображаются вымышленные названия и адреса.

   

Очистка ресурсов

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

1. Закройте браузер, в котором выполняется веб-приложение AzureMapDemo.html.
2. Перейдите на портал Azure. Выберите Все ресурсы на главной странице портала или щелкните значок меню в верхнем левом углу, а затем Все ресурсы.
3. Выберите учетную запись Azure Maps, а затем щелкните Удалить в верхней части страницы.

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

• Поиск адреса с помощью службы поиска Azure Maps
• Использование библиотеки Map Control в службе Azure Maps

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

В этом кратком руководстве вы создали учетную запись службы Azure Maps и запустили демоверсию приложения. Сведения об Azure Maps см. в этих учебниках: