HTML Geolocation API

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    30 thg 11, 2023

  • Số lượt xem

    348 lượt xem


HTML Geolocation API thường được dùng để phát hiện vị trí của người dùng và cách hướng dẫn sử dụng trong trình duyệt của người dùng và cài đặt trên trình duyệt của người dùng

Xác định Vị Trí Người Dùng

HTML Geolocation API được sử dụng để lấy vị trí địa lý của người dùng.

Do điều này có thể đe dọa quyền riêng tư, vị trí không sẵn có trừ khi người dùng chấp nhận.

Lưu ý: Định vị địa lý là độ chính xác nhất đối với các thiết bị có GPS, như điện thoại thông minh.

Trình Duyệt Hỗ Trợ

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

API

Chrome

Edge

FireFox

Safari

Opera

Geolocation

5.0 - 49.0 (http)

50.0 (https)

9.0

3.5

5.0

16.0

Lưu ý: Kể từ Chrome 50, Định vị địa lý 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 gốc không an toàn (như HTTP), các yêu cầu để lấy vị trí người dùng sẽ không hoạt động nữa.

Sử Dụng HTML Geolocation

Phương thức getCurrentPosition() đượ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í người dùng:

<script>
        const x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
            } else {
        x.innerHTML = "Trình duyệt này không hỗ trợ Định vị địa lý.";
           }
        }
        function showPosition(position) {
          x.innerHTML = "Vĩ độ: " + position.coords.latitude +
          "<br>Kinh độ: " + position.coords.longitude;
        }
</script>

Giải thích Ví dụ:

Kiểm tra xem Định vị địa lý có được hỗ trợ không

Nếu được hỗ trợ, chạy phương thức getCurrentPosition(). Nếu không, hiển thị một 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 Vĩ độ và Kinh độ

Ví dụ trên là một đoạn mã Định vị địa lý cơ bản, không có 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ó xác định một hàm chạy nếu nó không thể 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 = "Người dùng từ chối yêu cầu Định vị địa lý."
            break;
            case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Thông tin vị trí không khả dụng."
            break;
            case error.TIMEOUT:
            x.innerHTML = "Yêu cầu lấy vị trí người dùng đã hết thời gian."
            break;
            case error.UNKNOWN_ERROR:
            x.innerHTML = "Đã xảy ra lỗi không xác định."
            break;
        }
}

Thông Tin Địa Lý Cụ Thể

Trang này đã thể hiện 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 để cung cấp thông tin cụ thể về địa điểm, chẳng hạn như:

  • Thông tin địa phương cập nhật
  • Hiển thị điểm đặc biệt gần người dùng
  • Dẫn đường chi tiết (GPS)

Phương Thức getCurrentPosition() - Dữ Liệu Trả Về

Phương thức getCurrentPosition() trả về một đối tượng khi thành công. Các thuộc tính latitude, longitude và accuracy luôn được trả về. Các thuộc tính khác được trả về nếu có sẵn:

Thuộc Tính Trả Về

coords.latitude

Vĩ độ dưới dạng số thập phân (luôn được trả về)

coords.longitude

Kinh độ dưới dạng số thập phân (luôn được trả về)

coords.accuracy

Độ chính xác của vị trí (luôn được trả về)

coords.altitude

Độ cao tính bằng mét so với mực nước biển (được trả về nếu có sẵn)

coords.altitudeAccuracy

Độ chính xác của độ cao (được trả về nếu có sẵn)

coords.heading

Hướng theo độ theo chiều kim đồng hồ từ phía Bắc (được trả về nếu có sẵn)

coords.speed

Tốc độ theo mét mỗi giây (được trả về nếu có sẵn)

timestamp

Ngày/Giờ của phản hồi (được trả về nếu có sẵn)

Đối Tượng Định Vị Địa Lý - Các Phương Thức Thú Vị Khác

Đối tượng Định vị địa lý cũng 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 (giống như GPS trong một chiếc ô tô).

clearWatch()

- Dừng phương thức watchPosition().

Ví dụ dưới đây hiển thị phương thức watchPosition(). Bạn cần một thiết bị GPS chính xác để thử nghiệm điều này (như điện thoại thông minh):

<script>
    const x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
    x.innerHTML = "Trình duyệt này không hỗ trợ Định vị địa lý.";
    }
}
function showPosition(position) {
    x.innerHTML = "Vĩ độ: " + position.coords.latitude +
    "<br>Kinh độ: " + position.coords.longitude;
}
</script>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.