API geolocation trong HTML5 giúp bạn lấy được vị trí người dùng nếu được quyền cho phép, giúp bạn sử xác định vị trí khách hàng để hiện thị google maps trên website… Nhưng tọa độ này sẽ được định vị chính xác hơn khi xử dụng bằng thiết bị có GPS.

Cách dùng Geolocation

Dùng hàm getCurrentPosition() để lấy vị trí người dùng.

Ví dụ: Định vị đơn giản trả về các vĩ độ và kinh độ của vị trí của người sử dụng:

<script>
    var 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 + " Longitude: " + position.coords.longitude;
    }
</script>

Giải thích :

• Kiểm tra xem có hỗ trợ định vị hay không
• Nếu có hỗ trợ, chạy hàm getCurrentPosition(). Nếu không, hiển thị thông báo
• Nếu hàm getCurrentPosition() thực thi thành công, trả về tọa độ cho hàm showPosition()
• Hàm showPosition() hiển thị ra kinh độ và vĩ độ

Ví dụ trên là một đoạn xử lý rất cơ bản, không có bắt lỗi.

Xử lý lỗi hoặc khi người dùng từ chối tiết lộ thông tin vị trí

Tham số thứ hai của phương thức getCurrentPosition() được dùng để xử lý lỗi. Nó quy định hàm nào sẽ chạy nếu có lỗi.

Hệ thống sẽ chỉ định một hàm sẽ chạy khi lấy vị trí người dùng thất bại:

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

– Permission denied – Người dùng không cho phép truy xuất đến vị trí
– Position unavailable – không lấy được vị trí
– Timeout – chờ quá lâu

Hiển thị kết quả ở bản đồ Map

Để hiển thị kết quả ra bản đồ, bạn cần truy cập vào dịch vụ bản đồ như dịch vụ Google Maps để sử dụng kinh độ và vĩ độ.

function showPosition(position) {
    var latlon = position.coords.latitude + “,” + position.coords.longitude;
    var img_url = “http://maps.googleapis.com/maps/api/staticmap?center=“+latlon+”&amp;amp;zoom=14&amp;amp;size=400×300&amp;amp;sensor=false”;
    document.getElementById(“mapholder”).innerHTML = <img src=‘”+img_url+”‘>“;
}

Thông tin địa điểm cụ thể

Geolocation rất hữu ích cho việc tìm kiếm các địa điểm cụ thể xung quanh bạn.

Ví dụ:

Các thông tin về khu vực hiện tại
Địa điểm gần nhất so với vị trí hiện tại
Định hướng (GPS)

Chúc các bạn thành công!

  • HTML/CSS
  • April 13, 2017
  • 0 comment
  • 231 views

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang