company_banner

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



    Всем привет!

    В этой статье мы научимся работать с Bing-картами в Windows-приложениях. В результате мы получим приложение на JavaScript с использованием Bing Maps SDK.

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



    Установка Bing Maps SDK



    Первым шагом на пути использования Bing Maps в своем приложении является установка Bing Maps SDK. Чтобы поставить SDK, перейдите по ссылке, скачайте и установите предложенный vsix файл.

    Добавление Bing Maps в проект


    Откройте Visual Studio и создайте пустой проект JavaScript –> Store Apps –> Windows App.



    Добавьте ссылку на SDK Bing Maps. Для этого, в Solution Explorer правой кнопкой мыши нажмите на папку References, затем на Add Reference. Выберите Windows -> Extensions, затем Bing Maps для JavaScript.



    Обратите внимание: в папке js referenc’ов Bing Maps для JavaScript находится два JavaScript файла. Файл veapicore.js отвечает за загрузку карт в ваше приложение, а в файле veapiModules.js находится код, который используется в случае подключения дополнительных модулей Bing Maps.

    Следующим шагом при создании приложений с использованием API Bing Maps является получение ключа Bing Maps Key.

    Получение ключа Bing Maps Key


    Для того, чтобы получить ключ Bing Maps Key, перейдите на портал http://www.bingmapsportal.com/ и войдите со своей учетной записью Microsoft (Microsoft Account). Если у вас нет учетной записи Microsoft, вы можете создать ее здесь.



    В меню, расположенном справа, нажмите на ссылку “Create or view keys”. Откроется меню, где вам будет необходимо ввести информацию о своем приложении – его имя (Application name), адрес (если оно опубликовано), указать тип приложения и тип необходимого ключа, а также заполнить капчу.

    Обратите внимание на типы ключей. Подробно о доступных типах ключей можно почитать здесь.



    После создания ключа нижней части страницы “Create or view keys” портала http://www.bingmapsportal.com/ можно будет посмотреть детали созданного ключа.



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

    Добавление Bing Maps в свое приложение


    Нам необходимо добавить ссылки на файлы veapiModules.js и veapicore.js библиотеки Bing Maps:
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script> 
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>
    


    Добавьте блок div в том месте, где вы хотите отрендерить карту.
    <div id="myMap"> </div>
    


    В JavaScript файл, описывающий логику приложения, добавьте следующий код для инициализации карты.

    (function () { 
    var map;
    function initialize() { 
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap }); 
    }
    function GetMap() { 
        map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
              credentials: "YOUR_BING_MAPS_KEY" 
        }); 
    }
    document.addEventListener("DOMContentLoaded", initialize, false); 
    })();
    

    Замените YOUR_BING_MAPS_KEY на свой ключ Bing Maps Key, полученный выше.



    Готово! Уже сейчас отображается карта мира, по которой можно перемещаться, изменять масштаб и ее вид при помощи стандартных элементов управления, расположенных в левом верхнем углу.

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

    Основные настройки карты


    Описание всех свойств, для основных настроек карты в приложении вы можете найти тут: MapOptions Object и тут: ViewOptions Object.

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

    Ниже приведены основные доступные типы вида карты:


    Обратите внимание:
    • Некоторые режимы отображения карты (например, aerial) могут быть недоступны для конкретного города
    • Вы можете определить тип карты auto, для загрузки автоматического режима отображения в зависимости от масштаба карты
    • Режим отображения карты можно поменять вручную в левом верхнем углу




    Я выбрала для своей карты автоматический режим отображения. Для того, чтобы центром моей карты при загрузке была Москва, а также карта отображалась с желаемым масштабом (в моем случае 10), я использовала следующие настройки:

    function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                {
                    credentials: " YOUR_BING_MAPS_KEY ",
                    center: new Microsoft.Maps.Location(55.7521203, 37.6176651),
                    mapTypeId: Microsoft.Maps.MapTypeId.auto,
                    zoom: 10
                });
    
        }
    


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

    Добавление дополнительных модулей Bing Maps


    Добавление метки на карту


    Для того, чтобы добавить метку (PushPin) в центр карты, функцию нажатия на кнопку Pushpin определите следующим образом:

    function AddPushpinBtn_Tapped() {
                map.entities.clear();
                var center = map.getCenter();
                // Создаем Pushpin            
                var pin = new Microsoft.Maps.Pushpin(center, {
                    text: '1'
                });
    


    Данный код обновит карту и добавит на нее метку с надписью «1».



    Стилизация метки


    Можно добавить свою иконку для отображения метки. Для этого добавьте свое изображение в проект и добавьте в код создания метки следующие свойства – icon, width и height (иконка, ширина и высота):

    var pin = new Microsoft.Maps.Pushpin(center, {
                    icon: 'images/pin.png',
                    width: 45,
                    height: 38,
                    text: '1'
                });
    




    Добавление своей картинки – не единственная возможность модификации метки. Можно добавить вместо картинки надпись, например:



    Для добавления текста вместо картинки, добавьте в описание метки строку:

    var pin = new Microsoft.Maps.Pushpin(center, {
             htmlContent: '<span style="color:red;font-weight:bold;">Привет, Habr!</span>'
                });
    

    Также можно добавить описание метки, так называемый InfoBox.

    Добавляем Infobox


    Infobox – панель для отображения информации поверх карты. Infobox часто используется для отображения информации, связанной с местом, после нажатия на метку. Список всех доступных методов для работы с Infobox’ом можно найти здесь, свойства доступны тут.

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


    function AddInfoboxBtn_Tapped() {
                map.entities.clear();
                var center = map.getCenter();
                //Создаем метку 
                var pin = new Microsoft.Maps.Pushpin(center);
                pin.Metadata = {
                    title: 'Привет, хабр!',
                    description: 'Я нахожусь здесь.'
                };
                //Добавляем событие открытия infobox при нажатии на метку
                Microsoft.Maps.Events.addHandler(pin, 'click', OpenInfobox);
                //Добавляем метку на карту. 
                map.entities.push(pin);
            }
            function OpenInfobox(e) {
                if (e.target && e.target.getLocation && e.target.Metadata) {
                    //Собираем данные о местоположении pushpin 
                    var loc = e.target.getLocation();
                //Cоздаем свойства infobox’a 
                var infoboxOptions = { 
                    offset: new Microsoft.Maps.Point(0, 15), 
                    title: e.target.Metadata.title, 
                    description: e.target.Metadata.description, 
                };
                //Создаем infobox 
                var infobox = new Microsoft.Maps.Infobox(loc, infoboxOptions);
                //Добавляем infobox на карту
                map.entities.push(infobox);
            }
            }
    

    Обратите внимание: при добавлении метки мы воспользовались стандартным свойством Metadata. В данном примере внутри Metadata содержатся название и информация о координатах метки.



    Отлично! Теперь мы знаем, как работать с метками, добавлять из и стилизовать.

    Заключение



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

    Update: Опубилкована вторая часть статьи. Узнать, как добавить возможность отображения текущей координаты и проложить маршрут можно тут!

    Дополнительные ссылки


    Bing maps developer center
    Bing Maps SDK для Windows 8.1 Store приложений
    Bing Maps на MSDN
    Видео о Bing Maps
    MVA курс по мобильной разработке для веб-разработчиков
    Загрузить бесплатную или пробную Visual Studio
    Попробовать Microsoft Azure
    Изучить курсы Microsoft Virtual Academy

    Only registered users can participate in poll. Log in, please.

    О каких дополнительных возможностях настройки карт вы бы хотели прочитать?

    Microsoft
    569.98
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Share post

    Similar posts

    Comments 0

    Only users with full accounts can post comments. Log in, please.