Cách lấy vị trí người dùng trong Javascript với Geolocation API

Bởi

Việc lấy vị trí của người dùng có nhiều tác dụng như: chỉ đường, hiển thị thông tin thời tiết… Hay như google cũng lấy vị trí của người dùng để trả về kết quả phù hợp nhất…

Javascript có cung cấp một API để thực hiện được điều này, đó là Geolocation API. Với API này, bạn sẽ lấy được hai thông số: kinh độ, vĩ độ của người dùng.

Từ hai thông số này, bạn hoàn toàn có thể hiển thị lên bất kỳ loại bản đồ nào như Google Map, OpenStreet Map… Hoặc lưu chúng lại trong cơ sở dữ liệu để phân tích vào một ngày nào đó.

Trong bài viết này, mình sẽ hướng dẫn bạn sử dụng Geolocation API và hiển thị trên OpenStreetMap .

Nội dung chính của bài viết

Lấy vị trí người dùng sử dụng Geolocation API
Hướng dẫn sử dụng Geolocation API
- JavaScript
Chạy thử chương trình.
- Tạm kết

Lấy vị trí người dùng sử dụng Geolocation API

Geolocation API là một API phổ biến và được hỗ trợ bởi hầu hết các trình duyệt, cho phép người dùng cung cấp vị trí của họ cho một ứng dụng web.

Trên trang web chính thức (MDN), có định nghĩa về Geolocation API như sau:

The Geolocation API is accessed via a call to Navigator.geolocation; this will cause the user’s browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS). MDN document

Để lấy vị trí, chúng ta sử dụng hai hàm navigator.geolocation() và Geolocation. getCurrentPosition().

Lưu ý:

Vì thông tin vị trí thuộc phạm vi dữ liệu cá nhân nên ứng dụng cần phải hỏi người dùng có đồng ý cung cấp vị trí hay không?
Hiện tại Geolocation chỉ mới hỗ trợ giao thức https.

Để giữ cho bài viết này ngắn gọn, mình sẽ chỉ cung cấp tham số bắt buộc, là cơ bản nhất.

>> Đọc thêm: Giới thiệu series tự học Javascript trong 10 tiếng

Hướng dẫn sử dụng Geolocation API

Tạo một trang được gọi là Geo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VNTALKING - Location Test</title>
</head>

<body>
    <button onclick='locate();'>Get Location</button>
    <h1 id='posStatus'></h1>
    <a id='locInfo' target="#"></a>
</body>

</html>

Trong đó:

posStatus: Chỉ để hiển thị một thông báo cho người dùng, kiểu như: “Đang lấy vị trí…”, “Đã có lỗi.”.
locInfo:Để sẽ hiển thị kinh độ, vĩ độ, cũng như liên kết đến OpenStreetMap, với các tham số vĩ độ và kinh độ lấy được..

JavaScript

Tiếp theo bạn thêm đoạn mã Javascript vào trong thẻ <head></head>:

<script>
        function locate() {
            const posStatus = document.querySelector('#posStatus');
            const locInfo = document.querySelector('#locInfo'); 
            posStatus.innerHTML = 'Đang lấy vị trí...'
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    const lat = position.coords.latitude;
                    const long = position.coords.longitude; posStatus.innerHTML = 'Vị trí của bạn là: ';      // Display Latitude and Logitude
                    locInfo.innerHTML = Latitude: ${lat}, Longitude: ${long};      // Create the link. Use map=15-19 for zooming out and in
                    // Pass lat and long to openstreetmap
                    locInfo.href = https://www.openstreetmap.org/#map=19/${lat}  /${long};
                });
            }
        }
    </script>