Поиск на сайте: Расширенный поиск


Новые программы oszone.net Читать ленту новостей RSS
EF StartUp Manager - программа для слежением за программами, которые запускаются вместе с загрузкой операционной системы...
EF Mailbox Manager - программа для периодической проверки неограниченного количество аккаунтов электронной почты. Вы мож...
Программа позволяет узнать, чем занято место на жестком диске. Сканирует папки очень быстро и выводит наглядную диаграмм...
HashMyFiles - это маленькая утилита, которая предоставляет возможность рассчета контрольных сумм MD5 и SHA1 для одного и...
Файловый менеджер с очень малыми системными требованиями, но тем не менее с большими возможностями. Программа имеет ориг...
OSzone.net Microsoft Разработка приложений Windows (до Windows 10) Как добавить карты Bing Maps в Windows-приложение на HTML и JavaScript. Часть 1 RSS

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

Текущий рейтинг: 0 (проголосовало 0)
 Посетителей: 653 | Просмотров: 1086 (сегодня 0)  Шрифт: - +
В этой статье мы научимся работать с 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;">Привет, MSDN!</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: 'Привет,MSDN!',
                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 developer center
Bing Maps SDK для Windows 8.1 Store приложений
Bing Maps на MSDN
Видео о Bing Maps
MVA курс по мобильной разработке для веб-разработчиков
Загрузить бесплатную или пробную Visual Studio
Попробовать Microsoft Azure
Изучить курсы Microsoft Virtual Academy

Иcточник: msdn.microsoft.com  •  Опубликована: 26.01.2015
Нашли ошибку в тексте? Сообщите о ней автору: выделите мышкой и нажмите CTRL + ENTER
Теги:   Windows.


Оценить статью:
Вверх
Комментарии посетителей RSS

Чтобы оставить комментарий, зарегистрируйтесь или войдите с учетной записью социальной сети.