В этом руководстве вы узнаете, как использовать в JavaScript Geolocation API, чтобы разрешить веб-приложениям получать доступ к вашему местоположению после того, как вы согласитесь им поделиться.
API геолокации позволяет веб-приложению получать доступ к вашему местоположению, если вы согласны поделиться им.
Почему нужен?
API геолокации полезен для веб-приложений, которые должны работать на основе местоположения пользователя, таких как поисковые системы, веб-сайты электронной коммерции, карты и приложения погоды.
Например, веб-сайт электронной коммерции может попросить вас поделиться своим местоположением. Получив информацию, он может показать вам наличие продукта, а также цены и скидки в зависимости от вашего местоположения.
Точно так же поисковая система, такая как Google.com, может возвращать результаты локального поиска на основе вашего поискового запроса и местоположения.
Например, если вы находитесь в Сан-Франциско и ищете пиццу, Google покажет вам список пиццерий, которые находятся рядом с вашим текущим местоположением.
Объект геолокации
API геолокации доступен через объект navigator.geolocation.
Проверка, поддерживается ли
Чтобы проверить, поддерживает ли его браузер, вы можете проверить, существует ли свойство geolocation в объекте навигатора следующим образом:
if (!navigator.geolocation) {
console.error(`Your browser doesn 't support Geolocation`);
}'
Получение текущей позиции
Чтобы получить текущее местоположение пользователя, вы вызываете метод getCurrentPosition() объекта navigator.geolocation.
Метод getCurrentPosition() отправляет асинхронный запрос для определения местоположения пользователя и запрашивает оборудование для определения местоположения (например, GPS) для получения актуальных данных.
getCurrentPosition() может быть успешным или неудачным. Он принимает два необязательных обратных вызова, которые будут выполняться в каждом случае соответственно.
Если getCurrentPosition() успешно, вы получите позицию пользователя в виде объекта GeolocationCoordinates.
Объект GeolocationCoordinates имеет свойства latitude и longitude, которые представляют местоположение.
Пример
В следующем примере показано простое приложение с одной кнопкой. Когда вы нажмете кнопку, браузер попросит вас поделиться своим местоположением. Если вы согласны, он покажет вашу текущую широту и долготу.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Geolocation Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <button id="show" class="btn">Show my location</button> <div id="message"></div> </div> <script src="js/app.js"></script> </body> </html>
Ниже показан файл app.js:
(() = > {
const message = document.querySelector('#message');
// check if the Geolocation API is supported
if (!navigator.geolocation) {
message.textContent = `Your browser doesn 't support Geolocation`;
message.classList.add('error ');
return;
}
// handle click event
const btn = document.querySelector('#show ');
btn.addEventListener('click ',
function() {
// get the current position
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
// handle success case
function onSuccess(position) {
const {
latitude,
longitude
} = position.coords;
message.classList.add('success ');
message.textContent = `Your location: ($ {
latitude
},
$ {
longitude
})`;
}
// handle error case
function onError() {
message.classList.add('error ');
message.textContent = `Failed to get your location ! `;
}
})();Как это работает:
- Сначала выберите элемент
#messageс помощью метода querySelectorquerySelector(). - Затем покажите сообщение об ошибке, если браузер не поддерживает API геолокации.
- Затем выберите кнопку и прикрепите обработчик события клика. Обработчик события клика вызывает метод
getCurrentPosition()объектаnavigator.geolocation, чтобы получить текущую позицию пользователя.
Функции обратного вызова onSuccess и onError предназначены для обработки случаев успеха и ошибок.
После этого определите onSuccess(), которая получает широту и долготу из position.coords и показывает их в элементе
с message id.
Наконец, определите onError(), которая выводит сообщение об ошибке в случае сбоя метода getCurrentPosition().
Обратите внимание, что весь код в app.js упакован в IIFE.
Тестирование приложения
Ниже показано, как запустить веб-приложение с помощью Google Chrome. Если вы используете другой браузер, например Firefox, Edge или Safari, вы также сможете выполнить следующие шаги.
Когда вы нажимаете кнопку « Показать мое местоположение », браузер попросит вас поделиться своим местоположением следующим образом:
Если вы нажмете кнопку « Разрешить », вы увидите свое местоположение, как показано на следующем рисунке:
Обратите внимание, что ваше местоположение может быть другим.
Чтобы изменить настройку браузера, щелкните значок местоположения и кнопку « Управление »:
Он покажет такой экран:
Если щелкнуть значок « Корзина », разрешенный сайт будет удален.
И если вы обновите приложение и нажмете кнопку « Показать мое местоположение », оно снова попросит вас поделиться своим местоположением.
На этот раз, если вы нажмете кнопку « Блокировать »:
… приложение покажет сообщение об ошибке:
Заключение
- API геолокации позволяет веб-приложениям получать доступ к текущему положению пользователя.
- Используйте метод
navigator.geolocation.getCurrentPosition(), чтобы получить текущее местоположение пользователя.