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

1

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…

lấy vị trí người dùng

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 .

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()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>

Chạy thử chương trình.

Mở Geo.html trong trình duyệt của bạn và nhấp vào nút “Get Location” .

Khi trình duyệt hỏi có cho phép hay không? Hãy nhấp vào: Cho phép truy cập.

Lấy vị trí người dùng

Tạm kết

Đây chỉ là một ví dụ đơn giản về cách sử dụng một API rất thú vị của Javascript.

Bạn có thể khám phá một số chức năng thú vị khác như lấy độ cao, tiêu đề và tốc độ . Bạn chúng ở đây nhé MDN .

Cảm ơn bạn đã đọc và chúc bạn thành công.

1
Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Mới nhất Cũ nhất Nhiều voted nhất
Thông báo
AffiliateLabz
Guest

Great content! Super high-quality! Keep it up! 🙂