API vị trí địa lý web
Xác định vị trí của người dùng
API định vị địa lý HTML được sử dụng để lấy 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ư, vị trí sẽ không khả dụng trừ khi người dùng chấp thuận.
Lưu ý: Vị trí đị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.
API vị trí địa lý được hỗ trợ trong tất cả các trình duyệt:
| Yes | Yes | Yes | Yes | Yes |
Lưu ý: Kể từ Chrome 50, API vị trí địa lý sẽ chỉ hoạt động trên các ngữ cảnh an toàn như HTTPS. Nếu trang web của bạn được lưu trữ trên một 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 API vị trí địa lý
Phương getCurrentPosition()thức được sử dụng để trả về vị trí của người dùng.
Ví dụ dưới đây trả về vĩ độ và kinh độ của vị trí của người dùng:
Thí 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>
Ví dụ được giải thích:
- Kiểm tra xem Vị trí đị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, hãy hiển thị thông báo cho người dùng
- Nếu phương thức getCurrentPosition () thành công, nó 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à một script Định vị địa lý rất cơ bản, không có lỗi xử lý.
Xử lý lỗi và từ chối
Tham số thứ hai của getCurrentPosition()phương thức được sử dụng để xử lý lỗi. Nó chỉ định một hàm để chạy nếu nó không lấy được vị trí của người dùng:
Thí 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;
}
}
Hiển thị kết quả trong bản đồ
Để hiển thị kết quả dưới dạng bản đồ, bạn cần có quyền truy cập vào dịch vụ bản đồ, chẳng hạn như Google Maps.
Trong ví dụ dưới đây, vĩ độ và kinh độ trả về được sử dụng để hiển thị vị trí trong Google Map (sử dụng hình ảnh tĩnh):
Thí dụ
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Thông tin về vị trí cụ thể
Trang này đã trình bày cách hiển thị vị trí của người dùng trên bản đồ.
Vị trí địa lý cũng rất hữu ích cho thông tin cụ thể về vị trí, như:
- Thông tin địa phương cập nhật
- Hiển thị Đ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 getCurrentPosition()thức trả về một đối tượng khi 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ả lại 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ũng có các phương thức thú vị khác:
watchPosition()- Trả lại vị trí hiện tại của người dùng và tiếp tục trả lại vị trí đã cập nhật khi người dùng di chuyển (giống như GPS trên ô tô).clearWatch()- DừngwatchPosition()phương thức.
Ví dụ dưới đây cho thấy watchPosition()phương pháp. 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):
Thí 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>