Sử dụng API về Geolocation để định vị vị trí trong HTML5

[PVS]

Sử dụng API về Geolocation để định vị vị trí trong HTML5

Các hàm API về Geolocation trong HTML5 giúp lấy vị trí (địa lý) của người dùng. Tuy nhiên để sử dụng được tính năng này bạn cần sự cho phép của người dùng. Định vị còn hoạt động phụ thuộc vào thiết bị mà người dùng truy cập, cần cung cấp được tọa độ vị trí ví dụ như GPS trong smartphone.

Cú pháp sử dụng hàm định vị

navigator.geolocation.getCurrentPosition(success, error);

Trong đó:

• success : là một hàm callback do bạn định nghĩa, hàm này sẽ nhận được giá trị về đối tượng Possition để định vị khi hàm getCurrentPosition gọi thành công
• error : là một hàm callback do bạn định nghĩa, hàm này sẽ nhận được đối tượng PositionError nếu như hàm getCurrentPosition có lỗi.

Hàm callback nhận tọa độ định vị
Tham số success ở hàm getCurrentPosition là một hàm callback, hàm này được gọi và nhận tham số là đối tượng Possition nếu gọi thành công.

Từ đối tượng Possition các thông số về tọa độ được truy cập thông qua đối tượng
coord = Possition.coords

Với coord có được như vậy, kinh độ và vĩ độ xác định vị trí sẽ được lấy bằng biểu thức:
- Kinh độ: long = coord.longitude;
- Vĩ độ: lat = coord.latitude;

Ví dụ hàm callback lấy và hiển thị kinh độ vĩ độ vào một phần tử HTML có id là toado, giả sử đặt lại tên hàm callback này là showcoor

<div id="toado"></div>
<script>

    function showcoor(pos) {
        var coord = pos.coords;
        var long = coord.longitude;
        var lat  = coord.latitude;
        var boxhtml = document.getElementById("toado");
        boxhtml.innerHTML = "Kinh độ: " + long + "<br>" + "Vĩ độ: " + lat;

    }

    //TEST
    navigator.geolocation.getCurrentPosition(showcoor);
</script>

Hàm callback gọi khi có lỗi
Tham số error ở hàm getCurrentPosition là một hàm callback, hàm này được gọi và nhận tham số là đối tượng PositionError nếu gọi hàm getCurrentPosition thất bại.

Lấy mã lỗi bằng công thức: errcode = PositionError.code với các giá trị có ý nghĩa như sau:

• 1 - người dùng không cho phép lấy vị trí
• 2 - xác định vị trí có lỗi nào đó xảy ra
• 3 - toạ độ quá thời gian không trả về

Các thông báo lỗi được lấy qua công thức: message = PositionError.message

Ví dụ xây dựng hàm callback có tên errorgeo và hiện thị mã lỗi, thông báo lỗi ở phần tử HTML có id="toado"

<div id="toado"></div>
<script>

    function errorgeo(err) {
        var errcode = err.code;
        var message = err.message;
        var boxhtml = document.getElementById("toado");
        boxhtml.innerHTML = "Mã lỗi: " + errcode + "<br>" + "Nội dung lỗi: " + message;

    }

    function showcoor(pos) {
        var coord = pos.coords;
        var long = coord.longitude;
        var lat  = coord.latitude;
        var boxhtml = document.getElementById("toado");
        boxhtml.innerHTML = "Kinh độ: " + long + "<br>" + "Vĩ độ: " + lat;

    }

    //TEST
    navigator.geolocation.getCurrentPosition(showcoor, errorgeo);

</script>

Lấy ảnh bản đồ từ maps.googleapis.com
Với kinh độ và vĩ độ lấy được từ hàm getCurrentPosition nghĩa là đã biết được vị trí cần định vị, từ thông tin này từ mục đích ứng dụng mà bạn sử dụng khác nhau. Ví dụ sử dụng dịch vụ maps.googleapis.com để lấy ảnh bản đồ vị trí.

Ví dụ đã có kinh độ lat và vĩ độ long bạn có thể lấy địa ảnh bằng cách sử dụng URL:

https://maps.googleapis.com/maps/api/staticmap?center=lat,long&zoom=12&size=400x400

Ví dụ sau sửa đổi hàm showcoor ở trên để hiển thị ảnh bản đồ vị trí lấy được:

<div id="toado"></div>
<script>

    function errorgeo(err) {
        var errcode = err.code;
        var message = err.message;
        var boxhtml = document.getElementById("toado");
        boxhtml.innerHTML = "Mã lỗi: " + errcode + "<br>" + "Nội dung lỗi: " + message;

    }

    function showcoor(pos) {
        var coord = pos.coords;
        var long = coord.longitude;
        var lat  = coord.latitude;
        var boxhtml = document.getElementById("toado");
        var urlmap = "https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=12&size=400x400&markers=color:red%7Clabel:C%7C"+lat+","+long;
        boxhtml.innerHTML = urlmap+'<img src="'+urlmap+'"/>';

    }

    //TEST
    navigator.geolocation.getCurrentPosition(showcoor, errorgeo);

</script>

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

Nguồn: Internet​