Geolocation API

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

Các API Định vị cho phép người dùng để cung cấp vị trí của họ vào các ứng dụng web nếu họ mong muốn. Vì lý do riêng tư, người dùng được yêu cầu cho phép báo cáo thông tin vị trí.

Đối tượng định vị địa lý

Các Định vị API được công bố thông qua navigator.geolocation đối tượng.

Nếu đối tượng tồn tại, dịch vụ định vị địa lý có sẵn. Do đó, bạn có thể kiểm tra sự hiện diện của vị trí địa lý:

if ("geolocation" in navigator) {
  / * định vị địa lý có sẵn * /
} else {
  / * định vị địa lý KHÔNG có sẵn * /
}

Lưu ý: Trên Firefox 24 và các phiên bản cũ hơn, "geolocation" in navigatorluôn được trả về truengay cả khi API bị tắt. Điều này đã được sửa với Firefox 25 để tuân thủ thông số kỹ thuật. (bug 884921).

Lấy vị trí hiện tại

Để có được vị trí hiện tại của người dùng, bạn có thể gọi phương thức getCurrentPosition(). Điều này bắt đầu một yêu cầu không đồng bộ để phát hiện vị trí của người dùng và truy vấn phần cứng định vị để có được thông tin cập nhật. Khi vị trí được xác định, chức năng gọi lại được xác định sẽ được thực thi. Bạn có thể tùy chọn cung cấp chức năng gọi lại thứ hai để được thực thi nếu xảy ra lỗi. Tham số thứ ba, tùy chọn, là một đối tượng tùy chọn trong đó bạn có thể đặt tuổi tối đa của vị trí được trả về, thời gian chờ yêu cầu và nếu bạn muốn độ chính xác cao cho vị trí.

Lưu ý: Theo mặc định, getCurrentPosition() cố gắng trả lời nhanh nhất có thể với kết quả chính xác thấp. Nó rất hữu ích nếu bạn cần một câu trả lời nhanh bất kể độ chính xác. Chẳng hạn, các thiết bị có GPS có thể mất một phút hoặc hơn để sửa lỗi GPS, do đó, dữ liệu kém chính xác hơn(vị trí IP hoặc wifi) có thể được trả về getCurrentPosition() .

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(location.coords.latitude, location.coords.longitude);
});

Ví dụ trên sẽ khiến do_something()hàm thực thi khi lấy được vị trí.

Xem vị trí hiện tại

Nếu dữ liệu vị trí thay đổi (theo chuyển động của thiết bị hoặc nếu có thông tin địa lý chính xác hơn), bạn có thể thiết lập chức năng gọi lại được gọi với thông tin vị trí được cập nhật đó. Điều này được thực hiện bằng cách sử dụng hàm watchPosition(), có cùng tham số đầu vào như getCurrentPosition() . Chức năng gọi lại được gọi nhiều lần, cho phép trình duyệt cập nhật vị trí của bạn khi bạn di chuyển hoặc cung cấp vị trí chính xác hơn vì các kỹ thuật khác nhau được sử dụng để định vị địa lý cho bạn. Hàm gọi lại lỗi, là tùy chọn giống như đối với getCurrentPosition(), có thể được gọi lặp lại.

Lưu ý: Bạn có thể sử dụng watchPosition() mà không cần một cuộc gọi getCienPocation ().

var watchID = navigator.geolocation.watchPosition(function(location) {
  do_something(location.coords.latitude, location.coords.longitude);
});

Phương thức watchPosition() trả về số ID có thể được sử dụng để xác định duy nhất trình theo dõi vị trí được yêu cầu; bạn sử dụng giá trị này song song với phương thức clearWatch() để dừng xem vị trí của người dùng.

navigator.geolocation.clearWatch(watchID);

Phản ứng tinh chỉnh

Both getCurrentPosition() and watchPosition() accept a success callback, an optional error callback, and an optional PositionOptions object.

A call to watchPosition could look like:

function geo_success(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
  alert("Sorry, no position available.");
}

var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

Describing a position

The user's location is described using a Position object referencing a Coordinates object.

Handling errors

The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

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

Geolocation Live Example

HTML Content

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

JavaScript Content

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);

Live Result

Prompting for permission

Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

function prompt(window, pref, message, callback) {
    let branch = Components.classes["@mozilla.org/preferences-service;1"]
                           .getService(Components.interfaces.nsIPrefBranch);

    if (branch.getPrefType(pref) === branch.PREF_STRING) {
        switch (branch.getCharPref(pref)) {
        case "always":
            return callback(true);
        case "never":
            return callback(false);
        }
    }

    let done = false;

    function remember(value, result) {
        return function() {
            done = true;
            branch.setCharPref(pref, value);
            callback(result);
        }
    }

    let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Share Location",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
            {
                label: "Always Share",
                accessKey: "A",
                callback: remember("always", true)
            },
            {
                label: "Never Share",
                accessKey: "N",
                callback: remember("never", false)
            }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
}

prompt(window,
       "extensions.foo-addon.allowGeolocation",
       "Foo Add-on wants to know your location.",
       function callback(allowed) { alert(allowed); });

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
GeolocationChrome Full support 5Edge Full support 12Firefox Full support 3.5
Notes
Full support 3.5
Notes
Notes GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google (privacy) or a custom provider (MLS instructions).
IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
clearWatchChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
getCurrentPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes
Secure context requiredChrome Full support 50Edge ? Firefox Full support 55IE No support NoOpera Full support 37Safari Full support YesWebView Android Full support 51
Notes
Full support 51
Notes
Notes Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android Full support 50Firefox Android Full support 55Opera Android Full support 37Safari iOS Full support YesSamsung Internet Android ?
watchPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 16
Full support 16
No support 10.6 — 15
Safari Full support YesWebView Android Full support YesChrome Android Full support 18Firefox Android Full support 4Opera Android Full support 16
Full support 16
No support 11 — 14
Safari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

khả dụng

Vì định vị dựa trên WiFi thường được cung cấp bởi Google, API định vị vanilla có thể không khả dụng ở Trung Quốc. Bạn có thể sử dụng các nhà cung cấp bên thứ ba địa phương như Baidu , Autonavi hoặc Tencent . Các dịch vụ này sử dụng địa chỉ IP của người dùng và / hoặc ứng dụng cục bộ để cung cấp định vị nâng cao.

Xem thêm