Geolocation API - Định vị vị trí trong HTML5

Geolocation API - Định vị vị trí

Trong HTML5, các hàm API về Geolocation 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 smart phone

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ề đố 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 - tạo độ 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 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>