Map control что это
Клиентская библиотека JavaScript Map Control позволяет отображать карты и встроенные функциональные возможности службы "Карты Azure" в вашем мобильном или веб-приложении.
В этой документации используется веб-пакет SDK Azure Maps, но службы Azure Maps можно использовать с любым элементом управления картой. Здесь приведены некоторые популярные элементы управления картой с открытым кодом, для которых команда Azure Maps создала подключаемый модуль.
Known issues and limitations
See our list of known issues for WPF and Windows Forms controls in the Windows Community Toolkit repo.
Prerequisites
Before you can use this control, you must follow these instructions to configure your project to support XAML Islands.
map control
Control point (orienteering) — An orienteer about to punch at a control Control on a permanent course For other uses, see Con … Wikipedia
Map projection — A medieval depiction of the Ecumene (1482, Johannes Schnitzer, engraver), constructed after the coordinates in Ptolemy s Geography and using his second map projection A map projection is any method of representing the surface of a sphere or other … Wikipedia
Control character — In computing and telecommunication, a control character or non printing character is a code point (a number) in a character set, that does not in itself represent a written symbol. It is in band signaling in the context of character encoding. All … Wikipedia
Создание карты на веб-странице
Вы можете встроить карту в веб-страницу с помощью клиентской библиотеки JavaScript службы Map Control.
Загрузите в веб-пакет SDK Azure Maps. Вы можете выбрать один из вариантов:
Используйте размещенную на глобальном уровне версию CDN веб-пакета SDK Azure Maps, добавив ссылки на JavaScript и таблицу стилей в элементе <head> HTML-файла:
Загрузите исходный код веб-пакета SDK Azure Maps локально с помощью пакета NPM azure-maps-control и разместите его в приложении. Этот пакет также включает определения TypeScript.
npm install azure-maps-control
Добавьте ссылки на таблицу стилей Azure Maps в элемент <head> соответствующего файла:
Определения TypeScript можно импортировать в приложение, добавив следующий код:
Чтобы отобразить карту так, чтобы она занимала основную область страницы, добавьте следующий элемент <style> к элементу <head> .
В основной области страницы добавьте элемент <div> и присвойте ему id myMap.
Теперь необходимо инициализировать элемент управления картой. Чтобы проверить подлинность элемента управления, необходимо быть владельцем ключа подписки Azure Maps либо использовать учетные данные Azure Active Directory (AAD) с соответствующими параметрами проверки подлинности.
Если вы используете ключ подписки для проверки подлинности, скопируйте и вставьте указанный ниже элемент script в элемент <head> под первым элементом <script> . Замените значение <Your Azure Maps Key> первичным ключом подписки Azure Maps.
Если вы используете Azure Active Directory (AAD) для проверки подлинности, скопируйте и вставьте указанный ниже элемент script в элемент <head> под первым элементом <script> .
Дополнительные сведения о проверке подлинности с помощью Azure Maps см. в этом документе. Кроме того, список примеров, демонстрирующих интеграцию Azure Active Directory (AAD) с Azure Maps, можно найти здесь.
В этом примере мы передали id карты <div> . Другой способ сделать это — передать HTMLElement , используя document.getElementById('myMap') в качестве первого параметра.
Кроме того, при необходимости, можно добавить следующие элементы meta в элемент head страницы:
Сборка вашего HTML-файла должна выглядеть следующим образом:
Откройте файл в веб-браузере и вы увидите готовую для просмотра карту. Все должно выглядеть примерно так, как на изображении ниже.
Платформы JavaScript
Для разработки с использованием платформы JavaScript может оказаться полезным один из следующих проектов с открытым исходным кодом:
Локализация карты
Azure Maps предоставляет два разных способа настройки языка и регионального представления готовой для просмотра карты. Первый вариант — добавить эту информацию в глобальное пространство имен atlas , что приведет к тому, что все экземпляры элементов управления картой в вашем приложении будут по умолчанию использовать эти параметры. В приведенном ниже примере кода устанавливается французский язык (fr-FR) и региональное представление со значением Auto:
Второй вариант — передать эту информацию в параметры карты при загрузке карты следующим образом:
Вы можете загрузить несколько экземпляров карты на одной странице с разными настройками языка и региональными параметрами. Кроме того, эти параметры можно обновить после загрузки карты с помощью функции setStyle карты.
Ниже приведен пример Azure Maps с установленным языком fr-FR и региональным представлением Auto.
Полный список поддерживаемых языков и региональных представлений приведен здесь.
Предварительные требования
Для использования Map Control на веб-странице необходимо выполнить одно из указанных ниже предварительных требований.
Создайте учетную запись Azure Maps и получите первичный ключ подписки, который также называется первичным ключом или ключом подписки.
Получите учетные данные Azure Active Directory (AAD) с параметрами проверки подлинности.
map control
Control point (orienteering) — An orienteer about to punch at a control Control on a permanent course For other uses, see Con … Wikipedia
Map projection — A medieval depiction of the Ecumene (1482, Johannes Schnitzer, engraver), constructed after the coordinates in Ptolemy s Geography and using his second map projection A map projection is any method of representing the surface of a sphere or other … Wikipedia
Control character — In computing and telecommunication, a control character or non printing character is a code point (a number) in a character set, that does not in itself represent a written symbol. It is in band signaling in the context of character encoding. All … Wikipedia
MapControl for Windows Forms and WPF
The MapControl class enables you to display a symbolic or photorealistic map in your Windows Forms or WPF desktop application. This is one of several wrapped Universal Windows Platform controls that are available for Windows Forms and WPF applications as part of a feature called XAML Islands. For more information, see UWP controls in desktop applications (XAML Islands).
This control shows rich and customizable map data including road maps, aerial, 3D, views, directions, search results, and traffic. You can also display the user's location, directions, and points of interest.
If you have feedback about this control, create a new issue in the microsoft-ui-xaml repo and leave your comments there.
Поддержка облака Azure для государственных организаций
Веб-пакет SDK Azure Maps поддерживает облако Azure для государственных организаций. Все URL-адреса JavaScript и CSS, используемые для доступа к веб-пакету SDK Azure Maps, остаются неизменными. Для подключения к версии платформы Azure Maps на основе облака Azure для государственных организаций необходимо выполнить приведенные ниже задачи.
При использовании интерактивного элемента управления картой добавьте указанную ниже строку кода перед созданием экземпляра класса Map .
При проверке подлинности карт и служб обязательно используйте сведения о проверке подлинности Azure Maps на облачной платформе Azure для государственных организаций.
При использовании модуля служб необходимо задать домен для служб при создании экземпляра конечной точки URL-адреса API. Например, указанный ниже код позволяет создать экземпляр класса SearchURL и указать домен облака Azure для государственных организаций.
About MapControl
This control wraps an instance of the UWP Windows.UI.Xaml.Controls.Maps.MapControl class. The WPF version of this control is located in the Microsoft.Toolkit.Wpf.UI.Controls namespace. The Windows Forms version is located in the Microsoft.Toolkit.Forms.UI.Controls namespace. You can find additional related types (such as enums and event args classes) in the Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT namespace.
Читайте также: