Hướng dẫn Tìm hiểu APIs Geolocation của HTML5

[PVS]

Tìm hiểu APIs Geolocation của HTML5

Đây là một API thú vị nhất trong tất cả các API của HTML 5. Với Geolocation bạn có thể xác định được vị trí hiện tại của mình hoặc của người dùng. Nghe có vẻ đáng sợ, nhưng thực chất để thực hiện được điều đó thì trình duyệt cần phải có sự cho phép của bạn. Nếu bạn từng dùng qua API này thì bạn sẽ thấy mức độ chính xác đến kinh ngạc. Ở một số thành phố và quốc gia, độ chính xác của nó có thể đến vài mét.

#Căn bản về API
Trước tiên thì chúng ra cần phải khai báo Geolocation thông qua phương thức được cung cấp:

navigator.geolocation.getCurrentPosition(geoFunc, errFunc)

function geoFunc(e){
    console.log(e);
}
function errFunc(e){
    console.log(e);
}

Trong khai báo trên thì phương thức getCurrentPosition() dùng để gọi Geolocation API để sử dụng. Trong phương thức getCurrentPosition thì bạn phải cung cấp thêm hai phương thức để khai báo kết quả thành công geoFunc() và thất bại errFunc(). Các bạn có thể thay phiên nhau bấn Allow và Deny để xem kết quả mà console sẽ trả về.

Kết quả trả về trong console log của trình duyệt​

Bây giờ chúng ta sẽ khai báo thêm một thẻ section để hiển thị kết quả ra:

<section id="result"></section>

Sau đó, chúng ta sẽ tiếp tục phát triển phương thức geoFunc() để in các kết quả thu được ra màn hình trình duyệt

var result = document.querySelector('#result');
navigator.geolocation.getCurrentPosition(geoFunc, errFunc)
function geoFunc(e){
    var lati = e.coords.latitude;
    var loti = e.coords.longitude;
    var accu = e.coords.accuracy;
    result.innerHTML = 'Latitude: '+lati+'<br>Longitude: '+loti+'<br>Accuracy: '+accu;
}

function errFunc(e){
    console.log(e);
}

Nếu bạn xem trong bảng console ở trên thì ta còn thấy các giá trị khác như altitude và speed. Hai giá trị này chỉ có khi chúng ta sử dụng thiết bị có hỗ trợ GPS như điện thoại hoặc máy tính bảng,….

#Kết hợp Google Map Api
Lưu ý: bạn nên tham khảo trước về google maps api để khỏi bỡ ngỡ nhé. Thông tin về API có thể xem qua tại Google Developers
Bây giờ chúng ta đã lấy được thông số chính xác về tọa độ của bạn rồi, chúng ta chỉ việc áp dụng nó vào API của Bing Map hoặc Google Map để hiển thị nó lên bản đồ số thôi. Trong ví dụ này tôi sẽ dùng Google Map Api. Để có thể dùng được Google map api thì chúng ta cần phải tiến hành khai báo script API mà google cung cấp cho các lập trình viên:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Chúng ta cũng cần phải khai báo thẻ sẽ hiển thị kết quả bản đồ số mà google sẽ trả về

<section id="gMap"></section>

Sau đó chúng ta sẽ tiến hành khai báo các phương thức và thông số theo tài liệu của google cung cấp để tạo được một bản đồ số.

var result = document.querySelector('#result');
navigator.geolocation.getCurrentPosition(geoFunc, errFunc)
            
function geoFunc(e){
          console.log(e);
                var lati = e.coords.latitude;
                var loti = e.coords.longitude;
                var accu = e.coords.accuracy;
                result.innerHTML = 'Latitude: '+lati+'<br>Longitude: '+loti+'<br>Accuracy: '+accu;
                // Google Map
                var mapcanvas = document.createElement('div');
                mapcanvas.id = 'mapcontainer';
                mapcanvas.style.height = '400px';
                mapcanvas.style.width = '600px';
                document.querySelector('#gMap').appendChild(mapcanvas);
                var coords = new google.maps.LatLng(lati,loti);
                var options = {
                    zoom: 15,
                    center: coords,
                    mapTypeControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
                var marker = new google.maps.Marker({
                    position: coords,
                    map: map,
                    title:"You are here!"
                });
                var infowindow = new google.maps.InfoWindow({
                    content: 'Here your position. <br> Latitude: '+lati+'. Longitude: '+loti+'<br>',
                    position: coords
                });
                infowindow.open(map);
            }
function errFunc(e){
                console.log(e);
                // PERMISSION_DENIED: 1
                // POSITION_UNAVAILABLE: 2
                // TIMEOUT: 3
}

Trong đoạn code trên thì hoàn toàn dễ hiểu. Tuy nhiên, bạn cũng cần lưu ý một số điểm như sau:

google.maps.LatLng(lati,loti);

Nhập 2 giá trị latitude và longtitude mà geolocation trả về cho chúng ta.

mapTypeId: google.maps.MapTypeId.ROADMAP

Đoạn khai báo này giúp cho Google API biết rằng bạn đang muốn sử dụng loại bản đồ số mặc định nào? ROADMAP; SATELLITE; HYBRID; TERRAIN. Các bạn muốn biết 4 loại đó khác nhau như thế nào thì thay vào và chạy thử thôi.

mapTypeControl: true,

Hiển thị các nút điều khiển chuyển đổi giữa hải loại bảng đồ Map và Satellite. Nó nằm ở góc trên, bên phải của bản đồ.

var marker = new google.maps.Marker()

Đánh dấu vị trị của bạn trên bản đồ thông qua một con dấu đỏ.

var infowindow = new google.maps.InfoWindow()

Hiển thị thông tin mà bạn cần đưa vào ngay tại tọa độ mà bạn cung cấp. Một điều lưu ý là bạn nên tiến hành thay đổi các thông số để có thể biết được chức năng của nó là gì? Và nó sẽ ra sao nếu ta tiến hành thay đổi. Đó cũng là một cách để chúng ta tự trải nghiệm và ghi nhớ những tính năng đó.

#Tính năng dẫn đường
Tính năng dẫn đường là một tính năng khá hay, sao chúng ta không đưa nó vào website của mình nhỉ? Hướng dẫn khách hàng đường đi từ vị trí của họ đến công ty của chúng ta. Chúng ta sẽ phát triển tiếp từ đoạn code ở ví dụ Google API trước đó. Chúng ta sẽ lượt bỏ bớt đi các phần không cần thiết nữa google.maps.Marker() và google.maps.InfoWindow()

var result = document.querySelector('#result');
            
            navigator.geolocation.getCurrentPosition(geoFunc, errFunc)
            
            function geoFunc(e){
                console.log(e);
                var lati = e.coords.latitude;
                var loti = e.coords.longitude;
                var accu = e.coords.accuracy;
                result.innerHTML += 'Latitude: '+lati+'<br>Longitude: '+loti+'<br>';
                // Google Map
                var mapcanvas = document.createElement('div');
                mapcanvas.id = 'mapcontainer';
                mapcanvas.style.height = '400px';
                mapcanvas.style.width = '600px';
                document.querySelector('#gMap').appendChild(mapcanvas);
                var coords = new google.maps.LatLng(lati,loti);
                var options = {
                    zoom: 15,
                    center: coords,
                    mapTypeControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL
                    },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
                
                var rendererOptions = { map: map };
                directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
                // Begin route
                var start_point = new google.maps.LatLng (lati,loti);
                var dest_point = new google.maps.LatLng (10.791645,106.702395);
                var request = {
                        origin: dest_point,
                        destination: start_point,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                        };
                directionsService = new google.maps.DirectionsService();
                directionsService.route(request, function(response, status) {
          console.log(response);
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        console.log(response);
                        var distance = response.routes[0].legs[0].distance.text;
                        result.innerHTML += 'Bạn cách tôi: '+distance;
                    }else{
                        console.log('failed to get directions');
                    }
                });
                
            }
            function errFunc(e){
                console.log(e);
                // PERMISSION_DENIED: 1
                // POSITION_UNAVAILABLE: 2
                // TIMEOUT: 3
            }

Trong đó thì các bạn chú ý ở chổ khai báo start_point và dest_point đó là khai báo tọa độ giữa bạn và khách hàng của bạn.

directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
console.log(response)
}

Khai báo dịch vụ dẫn đường của Google Map API. Trong đó nếu bạn console kết quả trả về response thì sẽ có rất nhiều thông tin các tuyến đường sẽ đi qua, thời gian tổng cộng đi, tổng chiều dài đoạn đường sẽ đi,… Các bạn có thể xem trong bảng console của trình duyệt sẽ thấy.

​

Nếu vận dụng tốt kết quả trả về, kết hợp với khả năng tư duy và sức sáng tạo tốt, thì bạn sẽ có được những ý tưởng tuyệt vời đó.

#Kết luận
HTML 5 Geolocation API thực sự rất đơn giản và dễ dùng. Chúng ta chỉ cần khai báo vài dòng là sẽ có được tọa độ chính xác của mình rồi. Tuy nhiên, cái khó là lập trình viên cần phải hiểu rõ cách sử dụng bản đồ số của Google hoặc Bing. Thì khi đó, mới có thể tích hợp sâu vào được.

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

Nguồn: izwebz.com​