Как добавить карты Bing Maps в Windows-приложение на HTML и JavaScript. Часть 2

Сегодня мы продолжаем знакомство с картами Bing Maps. В предыдущей статье мы разобрались с тем, как добавить карту в Windows приложение, а также посмотрели, как работать с метками на карте.

В этой части мы будем продолжать улучшать нашу карту и добавлять различные полезные функции, такие как определение GPS-координаты, построение маршрутов и отображение информации о дорожной ситуации.

Для отображения текущей координаты пользователя на карте, в Bing Maps SDK используется класс GeoLocationProvider.

Для класса GeoLocationProvider доступны следующие методы:

addAccuracyCircle – отображает геолокационный круг на карте. Центр круга – текущая позиция, радиус – точность определения текущей позиции.

Вы можете отобразить на карте GPS координаты метки или просто координаты центра карты. Для начала, добавьте в HTML файл элемент для отображения координат. Далее, в функцию GetMap добавьте обработчик события viewchange, затем добавьте значение широты и долготы в ваш HTML элемент.

Обратите внимание: Вам необходимо добавить возможность определения геолокации в манифесте приложения. Для того, чтобы это сделать, откройте файл package.appxmanifest, перейдите во вкладку Возможности (Capabilities), поставьте галочку напротив Location.

Возможность узнать свои координаты или отобразить текущее местоположение пользователя, конечно, полезная, но, давайте перейдем к другим интересным возможностям, например, разберем, как можно работать с адресами – искать объекты и отображать их на карте.

SDK Bing Maps предоставляет возможность работы с геокодированием – процессом обработки введенного адреса и отображения его на карте. Обратное геокодирование делает противоположную задачу – преобразует координату точки на карте в адрес. Для реализиции поиска в Bing Maps используется класс SearchManager.

Для класса SearchManager доступны следующие методы:

Название Описание geocode Обрабатывает введенный адрес и отображает его на карте. При этом результаты запроса возвращаются в callback функцию. reverseGeocode Преобразует координату точки на карте в адрес. При этом результаты запроса возвращаются в callback функцию. search Выполняет поиск, основанный на указанных параметрах запроса и возвращает результаты в callback функцию. Для того, чтобы геокодировать место, вам необходимо передать объект, содержащий свойства геозапроса в метод geocode. Чаще всего используются следующие свойства параметра запроса:

Название Тип Описание callback функция Запрос вызова функции в случае возврата успешного результата от запроса геокода. Функция callback получит объект GeocodeResult в качестве аргумента. count число Максимальное число результатов для возврата. Максимальное число, которое может быть возвращено – 20. errorCallback функция Запрос вызова функции в случае возврата неуспешного результата от запроса. Функция callback получит объект, содержащий свойства запроса геокода. where строка Строка, содержащая адрес или место, которое надо сопоставить с отображением на карте. Когда пользователь вводит запрос на определение места по адресу (или наоборот), то этот запрос обрабатывается функцией GeocodeModule. Для реализации мы будем использовать Search module.

Общий план реализации геокодирования следующий:

Проверить инициализацию параметра searchManager.

Готово! Теперь мы можем искать объекты на карте! Далее разберемся с маршрутами, посмотрим, как построить маршрут по начальной и конечной точкам.

Для того, чтобы реализовать показ маршрута на карте, нам нужно получить от пользователя адрес начальной и конечной точек (точка А и точка В, соответственно). Воспользуемся модулем Directions module.

План работы с модулем Directions похож на работу с геокодирванием, а именно:

Первое, что мы должны сделать – убедиться в том, что параметр directionsManager был инициализирован.

Теперь на карте отображается путь, а слева появилась информация и подсказки по оптимальному (с точки зрения кратчайшего расстояния) пути! Кроме расчета маршрута пользователю может быть интересна информация о текущей дорожной ситуации – пробках и дорожно-транспортных происшествиях. И вы можете предоставить ему эту информацию. Давайте посмотрим, как это сделать.

В Bing Maps SDK есть возможность показать на карте картину скорости транспортного потока (места пробок) и добавить метки дорожно-транспортных происшествий. Информация о скорости транспортного потока отображается при помощи подсветки дороги разными цветами в зависимости от скорости потока. Дорожно-транспортные происшествия показываются на карте как метки. Для работы с информацией о дорожной ситуации доступны следующие методы:

Имя Тип Описание getIsOn булев Возвращает булево значение, определяющее отображается информация о дорожной ситуации или нет. hide Скрывает всю информацию о траффике. hideFlow Скрывает информацию о скорости транспортного потока. hideIncidents Скрывает информацию о дорожно-транспортных происшествиях. hideLegend Скрывает легенду транспортного потока. show Отображает всю информацию о транспортных потоках. showFlow Отображает информацию о скорости транспортного потока. showIncidents Отображает информацию о дорожно-транспортных происшествиях. showLegend Отображает легенду транспортного потока.

Теперь на нашей карте отображается картина скорости транспортного потока. Можно спланировать поездку в объезд всех пробок.

У нас получилось полноценное приложение для работы с картами, при помощи которого мы можем найти необходимое место на карте по его адресу и построить маршрут, а также узнать информацию о дорожной ситуации для выбора оптимального маршрута. В Bing Maps SDK есть еще много всего интересного, читайте остальные статьи и модернизируйте свое приложение!