Продолжаем знакомится с HTML5 Geolocation API. В первом уроке мы познакомились с HTML5 Geolocation API и узнали как можно определить местоположение пользователя — узнать широту, долготу и точность определения в метрах.
В этом уроке мы посмотрим на то, как можно определить местоположение пользователя сайта или мобильных приложении и показать на картах Google и Yandex. Мы будем использовать Yandex API Карт и Google Maps API. Так же посмотрим примеры построение маршрутов на картах Google и Yandex.
Для начало давайте создадим три файла — index.html, style.css и scripts.js.
У меня в HTML файле пока вот такой код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>HTML5 Geolocation API</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="map"></div> <script src="scripts.js"></script> </body> </html>
Создали структуру 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 документе перед подключением нашего скрипта.
<body> <div id="map"></div> <script src="http://maps.google.com/maps/api/js"></script> <script src="scripts.js"></script> </body>
После этого нам нужно добавить опции для карты 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("<p>Вы здесь!</p>"); infowindow.setPosition(loc); infowindow.open(map); }
Здесь мы создаем новую информационную панель, потом передаем тот текст, который нужно отображать в инфо. панели, в методе setPosition() передаем координаты и на карте отображается маркер.
Ниже представлен весь код файлов index.html и scripts.js.
index.html:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>HTML5 Geolocation API</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="map"></div> <script src="http://maps.google.com/maps/api/js"></script> <script src="scripts.js"></script> </body> </html>
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("<p>Вы здесь!</p>"); 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.
<body> <div id="map"></div> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> <script src="scripts.js"></script> </body>
После подключение скрипта Yandex API у нас в коде будет доступно глобальный объект ymaps. Объект ymaps имеет ready() метод, в которую нужно передать функцию, которая проверяет поддерживает ли браузер пользователя Geolocation API. Если поддерживает, то вызываем функцию getLocation().
В функции getLocation() определяем местоположение пользователя, передаем координаты (широта, долгота) в ymaps.Map() и он возвращает карту. В ymaps.Map() можно передать другие опции — например zoom (масштаб карты).
После этого мы можем добавить различны кнопки на карту. Это делается с помощью метода add().
- zoomControl — кнопки увеличения и уменьшение карты
- typeSelector — элемент управления «Типы карты»
- mapTools — тулбар со стандартными кнопками
После этого мы выживаем ymaps.Placemark(), он принимает координаты местоположения пользователя и опции. Он занимается выводом маркера и эти опции нужны для этого. С помощью опции можно изменить тип маркера, цвет и так далее.
После этого в карту добавляем новый объект — маркер. Ниже представлен результат и код.
Код из файла index.html:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>HTML5 Geolocation API</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="map"></div> <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script> <script src="scripts.js"></script> </body> </html>
Код из файла 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); }); }
1 комментарий
Вы можете комментировать эту статью
Дааа…. Все так просто и хорошо рассказано и показано! Но, к сожалению, на мой вопрос ответа нет и здесь. Интересует вопрос — можно ли в картах Google Maps задать/изменить проекцию, чтобы увидеть карту с центром на Северном Полюсе? Если бы хоть кто-то подсказал, что например это невозможно, то отрицательный результат для меня был бы уже результатом. А пока что мучаюсь в полном неведении…. Дока недоступна.
Наталья 2 года ago
Комментарии