{{securecontext_header}} {{APIRef("API định vị địa lý")}}
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í.
Các Định vị API được công bố thông qua {{domxref( "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)}}).
Để có được vị trí hiện tại của người dùng, bạn có thể gọi phương thức {{domxref("geolocation.getCurrentPosition()", "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, {{domxref("Geolocation.getCurrentPosition ()", "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ề {{domxref("Geolocation.getCurrentPosition()", "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í.
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 {{domxref("Geolocation.watchPocation ()", "watchPosition()")}}, có cùng tham số đầu vào như {{domxref("Geolocation.getCurrentPosition()", "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 {{domxref("Geolocation.getCurrentPosition()", "getCurrentPosition()")}}, có thể được gọi lặp lại.
Lưu ý: Bạn có thể sử dụng {{domxref("Geolocation.watchPosition()", "watchPosition()")}} mà không cần một cuộc gọi {{domxref("Geolocation.getCienPocation ()", "getCienPocation ()")}}.
var watchID = navigator.geolocation.watchPosition(function(location) {
do_something(location.coords.latitude, location.coords.longitude);
});
Phương thức {{domxref("Geolocation.watchPosition()", "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 {{domxref("Geolocation.clearWatch()", "clearWatch()")}} để dừng xem vị trí của người dùng.
navigator.geolocation.clearWatch(watchID);
Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional PositionOptions object.
{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}
A call to {{domxref("Geolocation.watchPosition()","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);
The user's location is described using a {{domxref("Position")}} object referencing a {{domxref("Coordinates")}} object.
{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}
{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}
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);
};
{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}
body {
padding: 20px;
background-color:#ffffc9
}
button {
margin: .5rem 0;
}
<button id = "find-me">Show my location</button><br/> <p id = "status"></p> <a id = "map-link" target="_blank"></a>
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);
{{EmbedLiveSample('Geolocation_Live_Example', 350, 150, "", "", "", "geolocation")}}
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); });
{{Compat("api.Geolocation")}}
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.