вторник, 3 апреля 2012, Djvibegga

Всем приятного времени суток. Итак, вкратце — в этой статье речь пойдет о 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>

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

<div id="askPermission">

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

<div id="manualEntry">

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

<div id="mapContainer">

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

Шаг 3.

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

<script type="text/javascript"

   src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">

</script>

Шаг 4.

Теперь мы начнем пошагово компоновать наш layout для того, чтобы представить в том виде как он будет выглядеть для пользователя.

<script type="text/javascript">
    $(function() {
    var map = null;
    var directionsManager = null;
    var location = null;
    var STORE_LOCATION = "San Jose, CA";

    $('#manualEntry').hide();
    $('#yesLocation').click(function() {
        $('#askPermission').hide();
        loadMap();
        //Get the location
        var options = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 2000
        };
        navigator.geolocation.getCurrentPosition(showPosition, positionError, options);
    });

    function loadMap() {
        //Initialize the map
        if (!map) {
             map = Microsoft.Maps.Map(

                 document.getElementById("directionsMap"),

                {credentials: '...'}

             );
        }
   }
});
//...
</script>

Используя 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" ).
• Наконец, мы вызываем метод "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();

}

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

$('#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;
    }
}

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

---