Geolocation API

Secure context

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

Geolokalizacja API umożliwia użytkownikowi zapewnić ich lokalizację do aplikacji internetowych, jeśli zechcą. Ze względów prywatności użytkownik jest proszony o zgodę na zgłoszenie informacji o lokalizacji.

Rozszerzenia Web, które chcą korzystać z obiektu Geolokalizacja, muszą dodać "geolocation"uprawnienie do swojego manifestu. System operacyjny użytkownika poprosi użytkownika o zezwolenie na dostęp do lokalizacji przy pierwszym żądaniu.

Pojęcia i użycie

Często będziesz chciał odzyskać informacje o lokalizacji użytkownika w swojej aplikacji internetowej, na przykład wykreślić jego lokalizację na mapie lub wyświetlić spersonalizowane informacje dotyczące ich lokalizacji.

The Geolocation API is accessed via a call to navigator.geolocation (en-US); 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:

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 (en-US) 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 (en-US) object as its only parameter, providing access information on what went wrong.
  • An optional PositionOptions (en-US) object, which provides options for retrieval of the position data.

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

Interfaces

Geolocation (en-US)
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.
GeolocationPosition (en-US)
Represents the position of a user. A GeolocationPosition instance is returned by a successful call to one of the methods contained inside Geolocation (en-US), inside a success callback, and contains a timestamp plus a GeolocationCoordinates (en-US) object instance.
GeolocationCoordinates (en-US)
Represents the coordinates of a user's position; a GeolocationCoordinates instance contains latitude, longitude, and other important related information.
GeolocationPositionError (en-US)
A GeolocationPositionError is returned by an unsuccessful call to one of the methods contained inside Geolocation (en-US), inside an error callback, and contains an error code and message.
Navigator.geolocation (en-US)
The entry point into the API. Returns a Geolocation (en-US) object instance, from which all other functionality can be accessed.

Dictionaries

PositionOptions (en-US)
Represents an object containing options to pass in as a parameter of Geolocation.getCurrentPosition() (en-US) and Geolocation.watchPosition() (en-US).

Examples

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

HTML

<button id = "find-me">Show my location</button><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: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

Result

Specifications

Specification Status Comment
Geolocation API Recommendation

Kompatybilność z przeglądarkami

BCD tables only load in the browser

Dostępność

Ponieważ Google często zapewnia lokalizację w oparciu o Wi-Fi, waniliowy interfejs API geolokalizacji może być niedostępny w Chinach. Możesz korzystać z usług lokalnych dostawców zewnętrznych, takich jak Baidu , Autonavi lub Tencent . Usługi te wykorzystują adres IP użytkownika i / lub lokalną aplikację do zapewnienia lepszego pozycjonowania.

Zobacz też