Javascript geolocation api определение города

Использование Geolocation API

Secure context: This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Geolocation API позволяет пользователю предоставлять своё местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.

Объект геолокации

Если объект существует, функции определения местоположения доступны. Вы можете проверить это следующим образом:

if ("geolocation" in navigator)  /* местоположение доступно */ > else  /* местоположение НЕ доступно */ > 

Получение текущего местоположения

Чтобы получить текущее местоположение пользователя, вы должны вызвать метод getCurrentPosition() . Это инициирует асинхронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр — объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.

Примечание: По умолчанию getCurrentPosition() пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные getCurrentPosition() .

.geolocation.getCurrentPosition(function(position)  do_something(position.coords.latitude, position.coords.longitude); >); 

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

Наблюдение за текущим местоположением

Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции watchPosition() (en-US), которая имеет несколько входных параметров: getCurrentPosition() . Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приёмов). Функция, которая вызывается при ошибке, для getCurrentPosition() , при желании, может быть вызвана неоднократно.

var watchID = navigator.geolocation.watchPosition(function(position)  do_something(position.coords.latitude, position.coords.longitude); >); 

Метод watchPosition() (en-US) возвращает числовой ID, который может быть использован для идентификации наблюдателя за местоположением; используйте его вместе с методом clearWatch() (en-US), чтобы перестать получать новые данные о местоположении.

.geolocation.clearWatch(watchID); 

Точная настройка отклика

getCurrentPosition() и watchPosition() (en-US) принимают колбэк-функцию при успехе, необязательную колбэк-функцию при ошибке и необязательный объект PositionOptions .

Этот объект позволяет вам включить возможность определения позиции с высокой точностью, указать максимальное время кеширования значения позиции (при повторных запросах, пока время не вышло, вам будет возвращается кешированное значение; после браузер будет запрашивать актуальные данные), а также указать значение, устанавливающее интервал — как часто браузер должен пытаться получить данные о местоположении, прежде чем выйдет время.

Вызов watchPosition (en-US) может выглядит следующим образом:

function geo_success(position)  do_something(position.coords.latitude, position.coords.longitude); > function geo_error()  alert("Извините, нет доступной позиции."); > var geo_options =  enableHighAccuracy: true, maximumAge : 30000, timeout : 27000 >; var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options); 

Описание позиции

Местоположение пользователя содержится в экземпляре объекта GeolocationPosition , содержащего внутри экземпляр другого объекта — GeolocationCoordinates .

Экземпляр GeolocationPosition содержит только две вещи, свойство coords , внутри которого GeolocationCoordinates и свойство timestamp, внутри которого экземпляр DOMTimeStamp (en-US), предоставляющее метку времени, созданную при получении данные.

Экземпляр GeolocationCoordinates содержит некоторое количество свойств, двое из которых вы будете чаще всего использовать: latitude и longitude , которые помогут вам отобразить полученную позицию на карте. Поэтому многие колбэк-функции с успешным получением позиции выглядят очень просто:

function success(position)  const latitude = position.coords.latitude; const longitude = position.coords.longitude; // Дальше код, который что-то делает с широтой(latitude) и долготой(longitude) > 

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

Обработка ошибок

Callback-функция для ошибок, если она была передана в getCurrentPosition() или watchPosition() , ожидает экземпляр объекта GeolocationPositionError в качестве первого аргумента. Он будет содержать два свойства, code , который укажет на то, какая именно ошибка произошла и понятное для человека message , описывающее значение поля code.

Функция может выглядеть примерно так:

function errorCallback(error)  alert('ERROR(' + error.code + '): ' + error.message); >; 

Примеры

Следующий пример использует Geolocation API для того, чтобы получить широту и долготу пользователя. При успешном выполнении, ссылка будет вести на openstreetmap.org , который отобразит пользовательскую позицию на карте.

body  padding: 20px; background-color:#ffffc9 > button  margin: .5rem 0; > 

HTML

button id = "find-me">Show my locationbutton>br/> p id = "status">p> a id = "map-link" target="_blank">a> 

JavaScript

function geoFindMe()  const status = document.querySelector('#status'); const mapLink = document.querySelector('#map-link'); mapLink.href = ''; mapLink.textContent = ''; function success(position)  const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textContent = ''; mapLink.href = `https://www.openstreetmap.org/#map=18/$latitude>/$longitude>`; mapLink.textContent = `Широта: $latitude> °, Долгота: $longitude> °`; > function error()  status.textContent = 'Невозможно получить ваше местоположение'; > if (!navigator.geolocation)  status.textContent = 'Geolocation не поддерживается вашим браузером'; > else  status.textContent = 'Определение местоположения…'; navigator.geolocation.getCurrentPosition(success, error); > > document.querySelector('#find-me').addEventListener('click', geoFindMe); 

Демо

Found a content problem with this page?

Источник

Geolocation API

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

WebExtensions that wish to use the Geolocation object must add the «geolocation» permission to their manifest. The user’s operating system will prompt the user to allow location access the first time it is requested.

Concepts and usage

You will often want to retrieve a user’s location information in your web app, for example to plot their location on a map, or display personalized information relevant to their location.

The Geolocation API is accessed via a call to navigator.geolocation ; this will cause the user’s browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).

The developer can now access this location information in a couple of different ways:

• Geolocation.getCurrentPosition() : Retrieves the device’s current location.
• Geolocation.watchPosition() : Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.

In both cases, the method call takes up to three arguments:

• A mandatory success callback: If the location retrieval is successful, the callback executes with a GeolocationPosition object as its only parameter, providing access to the location data.
• An optional error callback: If the location retrieval is unsuccessful, the callback executes with a GeolocationPositionError object as its only parameter, providing access information on what went wrong.
• An optional object which provides options for retrieval of the position data.

For further information on Geolocation usage, read Using the Geolocation API.

Interfaces

The main class of this API — contains methods to retrieve the user’s current position, watch for changes in their position, and clear a previously-set watch.

Represents the position of a user. A GeolocationPosition instance is returned by a successful call to one of the methods contained inside Geolocation , inside a success callback, and contains a timestamp plus a GeolocationCoordinates object instance.

Represents the coordinates of a user’s position; a GeolocationCoordinates instance contains latitude, longitude, and other important related information.

A GeolocationPositionError is returned by an unsuccessful call to one of the methods contained inside Geolocation , inside an error callback, and contains an error code and message.

The entry point into the API. Returns a Geolocation object instance, from which all other functionality can be accessed.

Examples

Specifications

Browser compatibility

BCD tables only load in the browser

Availability

As Wi-Fi-based locating is often provided by Google, the vanilla Geolocation API may be unavailable in China. You may use local third-party providers such as Baidu, Autonavi, or Tencent. These services use the user’s IP address and/or a local app to provide enhanced positioning.

See also

Found a content problem with this page?

This page was last modified on Feb 20, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник