API định vị địa lý HTML
API định vị địa lý HTML được sử dụng để xác định vị trí của người dùng.
Xác định vị trí của người dùng
API vị trí địa lý HTML được sử dụng để có được vị trí địa lý của người dùng.
Vì điều này có thể ảnh hưởng đến quyền riêng tư nên vị trí này sẽ không có sẵn trừ khi người dùng chấp thuận.
Ghi chú: Định vị địa lý là chính xác nhất cho các thiết bị có GPS, như điện thoại thông minh.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Định vị địa lý.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Lưu ý: Kể từ Chrome 50, API định vị địa lý sẽ chỉ hoạt động trên các bối cảnh bảo mật như HTTPS. Nếu trang web của bạn được lưu trữ trên nguồn không an toàn (chẳng hạn như HTTP), các yêu cầu lấy vị trí của người dùng sẽ không còn hoạt động.
Sử dụng Định vị địa lý HTML
Phương thức getCurrentPosition() được sử dụng để trả về vị trí của người dùng.
Ví dụ bên dưới trả về vĩ độ và kinh độ vị trí của người dùng:
Ví dụ
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script> Hãy tự mình thử »Ví dụ giải thích:
- Kiểm tra xem Định vị địa lý có được hỗ trợ không
- Nếu được hỗ trợ, hãy chạy phương thức getCurrentPosition(). Nếu không, hiển thị thông báo cho người dùng
- Nếu phương thức getCurrentPosition() thành công, nó sẽ trả về một đối tượng tọa độ cho hàm được chỉ định trong tham số (showPosition)
- Hàm showPosition() xuất ra Vĩ độ và Kinh độ
Ví dụ trên là tập lệnh Định vị địa lý rất cơ bản, không xử lý lỗi.
Xử lý lỗi và từ chối
Tham số thứ hai của phương thức getCurrentPosition() được sử dụng để xử lý lỗi. Nó chỉ định một chức năng sẽ chạy nếu không lấy được vị trí của người dùng:
Ví dụ
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
} Hãy tự mình thử »Thông tin cụ thể về vị trí
Trang này đã trình bày cách hiển thị vị trí của người dùng trên bản đồ.
Định vị địa lý cũng rất hữu ích cho thông tin vị trí cụ thể, như:
- Thông tin địa phương cập nhật
- Hiển thị Địa điểm ưa thích gần người dùng
- Điều hướng từng chặng (GPS)
Phương thức getCurrentPosition() - Trả về dữ liệu
Phương thức getCurrentPosition() trả về một đối tượng nếu thành công. Các thuộc tính vĩ độ, kinh độ và độ chính xác luôn được trả về. Các thuộc tính khác được trả về nếu có:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Đối tượng định vị địa lý - Các phương pháp thú vị khác
Đối tượng Geolocation còn có các phương thức thú vị khác:
-
watchPosition()- Trả về vị trí hiện tại của người dùng và tiếp tục trả về vị trí đã cập nhật khi người dùng di chuyển (như GPS trong ô tô). -
clearWatch()- Dừng phương thứcwatchPosition().
Ví dụ dưới đây minh họa phương thức watchPosition() . Bạn cần một thiết bị GPS chính xác để kiểm tra điều này (như điện thoại thông minh):
Ví dụ
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script> Hãy tự mình thử »