HTML5 — HackerX

HTML5 Geolocation API — Использование Google и Яндекс карт

Воскан Восканян — Mon, 31 Jul 2017 06:06:09 +0000

Продолжаем знакомится с HTML5 Geolocation API. В первом уроке мы познакомились с HTML5 Geolocation API и узнали как можно определить местоположение пользователя — узнать широту, долготу и точность определения в метрах.

В этом уроке мы посмотрим на то, как можно определить местоположение пользователя сайта или мобильных приложении и показать на картах Google и Yandex. Мы будем использовать Yandex API Карт и Google Maps API. Так же посмотрим примеры построение маршрутов на картах Google и Yandex.

Для начало давайте создадим три файла — index.html, style.css и scripts.js.

У меня в HTML файле пока вот такой код:



  
    
    HTML5 Geolocation API

Создали структуру HTML документа и подключили CSS и JavaScript файлы. Так же у меня в HTML коде есть элемент DIV с id map. Тут будет вывод карты Google или Yandex.

В CSS файле у меня такие стили для блока DIV:

#map{
   width: 600px;
   height: 400px;
   border: 1px solid #999;
}

А в JavaScript файле (script.js) практически весь код я взял из первого урока, кроме первой строки кода и вывода результата.

var block = document.getElementById('map');

function success(position) {
  var latitude = position.coords.latitude; // широта
  var longitude = position.coords.longitude; // долгота
  var accuracy = position.coords.accuracy; // точность
}

function error(errorCode) {
  var msg = "";
  switch (errorCode) {
    case 1: msg = "Нет разрешения";
      break;
    case 2: msg = "Техническая ошибка";
      break;
    case 3: msg = "Превышено время ожидания";
      break;
    default: msg = "Что то случилось не так";
  }

  block.innerHTML = msg;
}

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(success, error);
}

В предыдущем уроке полученные данные мы выводили в алерте, а тут нам не нужно сделать вывод, по этому я убрал вывод, также мы в HTML коде создали div с id map, этот див я взял в переменную block, в дальнейшем тут мы будем выводить карту. А теперь давайте начнем работу с картами Google и Yandex.

Пример работы с Google Maps API и HTML5 Geolocation API

Давайте начнем с Google Maps API. Сначала нам нужно подключить JavaScript файл Google Maps API в нашем HTML документе перед подключением нашего скрипта.

После этого нам нужно добавить опции для карты Google в нашем JavaScript файле.

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

zoom — сколько нужно увеличить масштаб карты
mapTypeId — тип используемой карты Google (У Google есть 4 типа карт — ROADMAP, SATELLITE, HYBRID, TERRAIN)

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

В нашем JavaScript файле, после создание опции, добавляем следующий код:

var map = new google.maps.Map(block, options);

В этом коде мы запустили карту и передали переменную block (место где нужно вывести карту) и опции. Осталось передать местоположение — широта и долгота.

У нас есть функция под названием success где мы получаем широту, долготу и точность. Давайте в эту функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);
}

В LatLng мы передаем широту и долготу и в переменную loc получаем специальный гугловский объект, которая нужно передать методу setCenter() объекта map. Он и занимается выводом карты.

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

Для добавление маркера давайте в нашу функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("Вы здесь!");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

Здесь мы создаем новую информационную панель, потом передаем тот текст, который нужно отображать в инфо. панели, в методе setPosition() передаем координаты и на карте отображается маркер.

Ниже представлен весь код файлов index.html и scripts.js.

index.html:



  
     
     HTML5 Geolocation API

scripts.js:

var block = document.getElementById('map');

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(block, options);

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("Вы здесь!");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения";
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
   }

    block.innerHTML = msg;
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

А теперь давайте посмотрим например использование Yandex API карт.

Пример работы с Yandex Maps API и HTML5 Geolocation API

Тут примерно тоже самое. Нам нужно подключить скрипт API Яндекс карт вместо Google.

После подключение скрипта Yandex API у нас в коде будет доступно глобальный объект ymaps. Объект ymaps имеет ready() метод, в которую нужно передать функцию, которая проверяет поддерживает ли браузер пользователя Geolocation API. Если поддерживает, то вызываем функцию getLocation().

В функции getLocation() определяем местоположение пользователя, передаем координаты (широта, долгота) в ymaps.Map() и он возвращает карту. В ymaps.Map() можно передать другие опции — например zoom (масштаб карты).

После этого мы можем добавить различны кнопки на карту. Это делается с помощью метода add().

zoomControl — кнопки увеличения и уменьшение карты
typeSelector — элемент управления «Типы карты»
mapTools — тулбар со стандартными кнопками

После этого мы выживаем ymaps.Placemark(), он принимает координаты местоположения пользователя и опции. Он занимается выводом маркера и эти опции нужны для этого. С помощью опции можно изменить тип маркера, цвет и так далее.

После этого в карту добавляем новый объект — маркер. Ниже представлен результат и код.

Код из файла index.html:



  
     
     HTML5 Geolocation API

Код из файла scripts.js:

ymaps.ready(init);

function init() {
   if(navigator.geolocation) {
     getLocation();
   }else{
     document.getElementById("map").innerHTML = "Geolocation API не поддерживается в вашем браузере";
   }
}

function getLocation() {
   navigator.geolocation.getCurrentPosition(function (position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;
     var map = new ymaps.Map("map", {
       center: [latitude, longitude],
       zoom: 13
     });

     map.controls
       .add('zoomControl')
       .add('typeSelector')
       .add('mapTools');

     var place = new ymaps.Placemark(
       [latitude, longitude],
       {iconContent: "Вы здесь!"},
       {preset: "twirl#redStretchyIcon"}
     );

     map.geoObjects.add(place);
   });
}

The post HTML5 Geolocation API — Использование Google и Яндекс карт appeared first on HackerX.

HTML5 Geolocation API

Воскан Восканян — Mon, 31 Jul 2017 05:50:45 +0000

С помощью HTML5 и JavaScript мы можем определить местоположение пользователя сайта или мобильного приложений, если он написан на языке программирования JavaScript. Это можно сделать с помощью HTML5 Geolocation API (HTML5 Геолокация).

В последних версиях современных браузеров доступен объект geolocation. Объект geolocation является свойством объекта navigator.
Мы можем проверить поддерживает браузер пользователя объект geolocation или нет.

if(navigator.geolocation) {
    alert("Объект Geolocation поддерживается.");
} else {
    alert("Объект Geolocation не поддерживается.");
}

Если у объекта navigator есть свойства geolocation, то при проверке условий он вернет true, в противном случае — false.

У объекта geolocation есть 3 метода:

getCurrentPosition()
watchPosition()
clearWatch()

Но нас интересует метод getCurrentPosition(), и мы его будем использовать в данном уроке. С помощью метода getCurrentPosition() определяется местоположение пользователя.

Нужно учесть, что метод getCurrentPosition() выполняется асинхронно. Это означает, что в нашем коде после вызова метода getCurrentPosition() интерпретатор пойдет выполнить код дальше, не ожидая определение местоположение пользователя. Но нам как то нужно знать когда будет выполнена определение местоположение. И для этого мы можем передать в метод getCurrentPosition() callback функцию (функция обратного вызова).

Функция обратного вызова принимает один аргумент — position. В данном аргументе придет результат выполнения метода getCurrentPosition().

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position) {
        alert("OK");
    });
}else{
    alert("Объект Geolocation не поддерживается.");
}

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

После выполнение метода getCurrentPosition() в объект position придет два свойства — это timestamp и coords. свойства Свойства timestamp — это время определение местоположения пользователя в миллисекундах.

А в свойстве coords содержится в свою очередь свойства:

accuracy — точность (в метрах)
latitude — широта
longitude — долгота

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function (position) {
    var latitude = position.coords.latitude; // широта
    var longitude = position.coords.longitude; // долгота
    var accuracy = position.coords.accuracy; // точность

    var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
    alert(result);
  });
}else{
  alert("Объект Geolocation не поддерживается.");
}

После выполнение данного кода мы увидим окно с координатами и точность определение местоположения в метрах.

Давайте немного улучшаем наш код.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность
   var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success);
}

Мы вынесли переменные и вывод результата в отдельную функцию (success), которая принимает один параметр / аргумент — position, и данную функцию (ссылка на функцию) мы отдаем в метод getCurrentPosition(). Но это еще не все, мы не обработали ошибки.

В втором параметре метода getCurrentPosition() будет приходить код ошибки, если будет ошибка. Давайте создадим еще одну функцию, которая будет принимать один параметр — код ошибки и выводит пользователю сообщение об ошибке.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var result = " широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

// Обработка ошибок
function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения"; // Пользователь не дал разрешения на определение местоположения
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
  }

   alert(msg);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

Если есть коды ошибок и значение по умолчанию, то мы можем сконфигурировать эти значение. Для этого мы можем передать третий аргумент в метод getCurrentPosition() — это некие настроечные параметры в виде объекта.

Параметры и значение по умолчанию:

enableHighAccuracy — по умолчанию false
timeout — по умолчанию 0 (ноль)
maximumAge — по умолчанию 0 (ноль)

enableHighAccuracy — Высокоточное определение местоположение пользователя (Обычно используется GPS, если есть). В основном это касается мобильных устройств.

timeout — Время запроса и ожидание на ответа. По умолчанию ноль, то есть он будет до бесконечности запрашивать, пока не получит ответ. Значение нужно передать в миллисекундах.

maximumAge — кэширование данных о местоположение пользвателя. Значение нужно передать в миллисекундах.

Любой из этих параметров мы можем передать в третий аргумента метода getCurrentPosition() как объект.

// тут наши функции ...

var params = {
   timeout: 10000,
   maximumAge: 60000
};

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error, params);
}

В втором уроке мы посмотрим как можно использовать Google Map API и Yandex Map API. Посмотрим как можно вывести местоположение пользователя на карту и как можно нарисовать маршруты.

The post HTML5 Geolocation API appeared first on HackerX.