Работа с картами Bing, геолокация

Автор: Eugeniy Marilev
Дата публикации: 2014-05-06 10:25:02

Всем приятного времени суток. Итак, вкратце — в этой статье речь пойдет о Bing Maps, будет описан пример использования HTML 5 Geo-Location в приложении ASP.NET MVC, с помощью встроенного API и JavaScript. Когда речь идет о географическом положении, трудно не пустить в ход цифровые карты

. К счастью для нас, как Bing так и Google имеют очень расширенную основу для работы с картами, которая открыта для общего пользования. Сегодня мы будем использовать основу Ajax Bing API для нанесения на карту общей структуры маршрута между пользователем и областным центром, а также визуализировать это на карте. Перед тем, как начать работать с картами, вам необходимо зайти на Bing Maps developer portal и получить ключ API. Можно войти используя любой Live ID или же Hotmail аккаунт. Итак, поехали...

Использование Bing Maps Ajax Control and API

В этом примере мы будем решать теоретические проблемы, с которыми обычно сталкиваются разработчики при построении маршрута, например, до супермаркета. Приложение будет обладать следующей логикой:

  1. Мы знаем адрес нашего супермаркета и, для простоты, пусть у него будет один единственный адрес.
  2. Мы просим пользователей, чтобы они нам дали доступ к геолокационному API.
  3. Если пользователь дает нам доступ, то это здорово! Мы будем вычислять маршрут, используя API Bing и показывать маршрут между обнаруженным местонахождением пользователя и супермаркетом на карте Bing.
  4. Если пользователь не дает нам доступа, мы будем просить предоставить нам адрес и попытаться получить маршрут между двумя точками.

Давайте рассмотрим все шаги для построения такого приложения...

Шаг 1.

Создадим новый проект ASP.NET MVC в Visual Studio.

Шаг 2.

Изменим "Index.cshtml" добавив следующие элементы к нему:

    <h3>Как добраться до супермаркета</h3>
    <div id="askPermissions">
        Мы можем быстро вас направить к ближайшему магазину. Можно ли использовать информацию о вашем    местоположении? 
	<br/>
	(Нажмите «Нет" для ввода адреса вручную)
	<input id="yesLocation" type="button" value="Yes"/>
	<input id="noLocation" type="button" value="No"/>
    </div>
    <div id="manualEntry">
	Ваше текущее местоположение
	<input id="manualAddress" type="text" style="width: 500px;"/>
	<input id="getManualDirections" type="button" value="Get Directionss">
    </div>
    <div id="mapContainer" style="width: 500px;">
	<div style="float: left">
	     <div id="directionsMap" style="float: none; position: relative; width: 720px; height: 400px;"</div>
	</div>
	<div id="directionsList" style="float: left; overflow: auto;  width: 250px; height: 400px;">
    </div>

Обновляем заголовок на «Как добраться до супермаркета».


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


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


- контейнер, содержащий два дочерних элемента. Первый показывает контрол Bing Map, а второй детали маршрута. Это, собственно, и весь HTML, который нам потребуется. Далее магия JavaScript.

Шаг 3.

Добавить следующий скрипт, чтобы встроить зависимые элементы Bing Map:


Используя JQuery инициализируем все необходимые глобальные переменные:

  • map - это объект карты Bing.
  • directionManager - объект, который управляет маршрутом между двумя точками.
  • location - место пользователя (если он обнаружен поисковой службой) и
  • STORE_LOCATION - адрес нашего магазина (адрес которого - Сан-Хосе, Калифорния, США). Измените его на любой город по вашему выбору.
  • Скрываем контейнер для ввода положения вручную (manual entry) и подключаем обработчик события нажатия на кнопку "Да", посредством которого пользователь дает нам разрешение на использование служб определения местоположения.
  • Прячем контейнер, в котором осуществляли запрос на разрешение.
  • Вызываем метод loadMap().
  • Устанавливаем необходимые нам опции запроса. Для того чтобы API определения местоположения обладало высокой точностью (Accuracy), если возможно, установить тайм-аут в 20 секунд, а максимальный возраст (maximumAge) значения в 2 секунды. Accuracy и maximumAge являются более важными, с точки зрения отслеживания движущегося расположения.
  • Наконец, вызываем API, чтобы получить местоположение, передавая два callback'а - для обработки успешной и неудачной ситуаций. loadMap() просто проверяет инициализировался ли объект карты или нет, и если нет - инициализирует его. Отметим следующее:
    • Передаем элемент "div", который должен содержать карту.
    • Передаем полномочия в виде нашего API ключа, который мы получили с портала Bing Maps.
        function showPosition(position)  {
            map.entities.clear();
            if (position) {
                location = position.coords;
    	    map.setView({zoom: 15, center: Microsoft.Maps.Location(location.latitude, location.longitude)});
            }
    	if (!directionsManager) {
    	    Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {callback: createDirectionsManager});
    	} else {
    	    createDirectionsManager();
    	}
        }
    
        function  createDirectionsManager() {
    	var displayMessage = null;
    	if (!directionsManager) {
    	    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    	    displayMessage = 'Directions module loaded\n';
    	    displayMessage += 'Directions Manager loaded';
    	}
    	directionsManager.resetDirections();
    	directionsErrorEventObj = new Microsoft.Maps.Events.addHandler( directionsManager, 'directionsError',  directionsError);
    	directionsUpdateEventObj = new Microsoft.Maps.Events.addHandler( directionsManager, 'directionsUpdated',  directionsUpdated);
    	createDrivingRoute(location);
        }
    
        function directionsUpdated() {
            //Show success message if required
        }
    
        function directionsError() {
            //Show error message if required
        }
       

Обработка различных ситуаций

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

  • Метод "showPosition" запускается как только местоположение определяется успешно. Входной параметр проверяется на равенство null, а если не null, значит карта настроена на центр в этом месте. После этого мы проверяем был ли запущен directionsManager. Если нет, то запускается "directions module" снабженным callback'ом загрузки, который создает directionManager.
  • Обработчик "createDirectionsManager" инициализирует directionManager и добавляет два callback'а - для успешной и ошибочной ситуаций. В данном примере мы не обрабатываем никак результирующие ситуации (как показано в коде методов "directionsUpdate" и "directionsError" ).<.li>
  • Наконец, мы вызываем метод "createDrivingRoute" для того, чтобы нанести маршрут на карту.
function createDrivingRoute(coords) {
    if (!directionsManager) {
	createDirectionsManager();
    }
    directionsManager.resetDirections();
    //Set route mode to driving
    directionsManager.setRequestOptions({routeMode: Microsoft.Maps.Directions.RouteMode.driving});
    var fromWayPoint = null;
    if (coords != null) {
        fromWayPoint = new Microsoft.Maps.Directions.Waypoint({
	    location: new Microsoft.Maps.Location(coords.latitude, coords.longitude)
        });
	directionsManager.addWaypoint(fromWaypoint);
    } else {
	fromWayPoint = new Microsoft.Maps.Directions.Waypoint({
	    address: $('#manualAdress').val()
	});
	directionsManager.addWaypoint(fromWaypoint);
    }
    var toWaypoint = new Microsoft.Maps.Directions.Waypoint({
	address: STORE_LOCATION
    });
    directionsManager.addWaypoint(toWaypoint);
    //Set the element in which the itinerary will be rendered
    directionsManager.setRenderOptions({inineraryContainer: document.getElementById('directionsList')});
    directionsManager.calculateDirections();
}

Метод "createDrivingRoute" рассчитывает маршрут между местоположением пользователя и статическим адресом, а Map control рисует для нас карту:

  • Проверяем запущен ли "directionManager", если нет - запускаем его.
  • Очищаем маршруты (если таковые были ранее установлены).
  • Устанавливаем "routeMode" в режим "автомобильных дорог". Другие возможные режимы - "для общественного транспорта" и "пешком".
  • Проверяем, координаты отправления на равенство нулю. Если нулевые создаем точку на основе широты и долготы текущей позиции, или же на основе адреса предоставленного пользователем вручную.
  • Устанавливаем пункт назначения с помощью статического адреса "STORE_LOCATION".
  • "directionManager" определяет элемент, который будет использоваться для формирование изображения маршрута.
  • Наконец, "directionManager" вычисляет направление и настраивает карту соответственно.

В вышеописанных примерах мы больше внимания уделяли логике автоматического построения маршрута, обнаружения пути. Далее рассмотрим код при введении адреса вручную.

$('#noLocation').click(function() {
    $('#askPermission').hide();
    showManualEntry();
});

function showManualEntry() {
    $('#manualEntry').show();
}

$('#getManualDirections').click(function() {
    loadMap();
    showPositions(null);
});

function positionError(position) {
    switch (position.code) {
	case 1:
	case 2:
	case 3:
	    showManualEntry();
	    break;
	default:
	    break;
    }
}

Давайте остановимся и подведем итоги:

  • У нас есть кнопка «нет» с обработчиком на случай, если пользователь не желает делиться автоматически данными о местоположении, тогда приложение скрывает этот вопрос и показывает, панель для ввода местоположения вручную.
  • Есть кнопка "Проложить маршрут" с обработчиком, который обязательно вызывает следующие два метода:
    • "loadMap" - просто загрузить карту, если ещё не загружена.
    • "showPosition" - вызывая этот метод с параметром null, мы подразумеваем, что у нас нет точных данных, поэтому метод createDrivingRoute, в конце концов, использует текст введенный пользователем в поле адреса.

Все готово, проверяйте!

В заключение

Мы в рамках данного поста ознакомились с основами Bing API на примере очень простого приложения с использованием HTML 5 и Geo-Location API. И так как у вас есть такой простой и в тоже время мощный инструмент как Location API, то вы просто обязаны знакомить пользователя с ним очень аккуратно, настолько, чтобы он мог доверять вам и вашему приложению. Предлагайте пользователю альтернативные варианты. Удачи, мы будет рады вашим творческим решениям по работе с Geolocation API. Материал статьи взят из http://www.dotnetcurry.com/ShowArticle.aspx?ID=783 Если понравилось работать с картами Bing вот вам полезные ссылочки: W3C Spec for Location API in browsers: http://www.w3.org/TR/geolocation-API/ Bing Maps Sample Playground: http://www.bingmapsportal.com/isdk/ajaxv7 Bing Maps API Registration: http://www.bing.com/toolbox/bin

Комментарии к статье
Комментарии:
Нет результатов.
Только зарегистрированые пользователи могут оставлять комментарии