地理位置 API

在此页

概念和用法
接口
字典
范例
规范
浏览器兼容性
另请参阅
相关话题

安全上下文
此特征只可用于安全上下文 (HTTPS)，在某些或所有支持浏览器 .

地理位置 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.

概念和用法

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 PositionOptions object, which provides options for retrieval of the position data.

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

接口

Geolocation
GeolocationPosition: 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 对象实例。
GeolocationCoordinates: Represents the coordinates of a user's position; a GeolocationCoordinates instance contains latitude, longitude, and other important related information.
GeolocationPositionError: 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.
Navigator.geolocation: The entry point into the API. Returns a Geolocation object instance, from which all other functionality can be accessed.

字典

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

范例

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.

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

HTML

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link"></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);

结果

规范

规范	状态	注释
地理位置 API	推荐

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`Geolocation`	Chrome 5	Edge 12	Firefox 3.5 3.5 GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google ( privacy ) or a custom provider ( MLS instructions ).	IE 9	Opera 10.6	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 5	Samsung Internet Android 1.0
`clearWatch`	Chrome 5	Edge 12	Firefox 3.5	IE 9	Opera 10.6	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 5	Samsung Internet Android 1.0
`getCurrentPosition`	Chrome 5	Edge 12	Firefox 3.5	IE 9	Opera 10.6	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 5	Samsung Internet Android 1.0
Secure context required	Chrome 50	Edge ≤79	Firefox 55	IE No	Opera 37	Safari Yes	WebView Android 51 51 Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574 .	Chrome Android 50	Firefox Android 55	Opera Android 37	Safari iOS Yes	Samsung Internet Android 5.0
`watchPosition`	Chrome 5	Edge 12	Firefox 3.5	IE 9	Opera 10.6	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 5	Samsung Internet Android 1.0

图例

完整支持
不支持

可用性

As WiFi-based locationing 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 ，或 Tencent . These services use the user's IP address and/or a local app to provide enhanced positioning.

另请参阅

元数据

最后修改： Jul 24, 2020

在此页

概念和用法

接口

字典

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

可用性

另请参阅

相关话题