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

HTML5 giúp ích rất nhiều cho người làm web bởi nó hỗ trợ rất nhiều API cho phép bạn thao tác với người dùng nhiều hơn. Trong bài viết này tôi sẽ hướng dẫn bạn lấy thông tin vị trí người dùng như quốc gia, thành phố, vị trí, zipcode… Từ những thông tin này bạn có thể biết được người dùng của mình đến từ đâu. Thông tin này có vẻ rất phù hợp với các bạn làm Thương mại điện tử.

Trong hướng dẫn này, tôi sử dụng một thành phần khá hay của HTML5 đó là HTML5 Geolocation API. Tuy nhiên, vì đây là thông tin cá nhân mà có thể người dùng không muốn tiết lộ nên bạn cần phải có sự cho phép từ phía người dùng. Nếu bạn đã có sự cho phép của người dùng, từ kinh độ và vĩ độ có được bạn có thể xác định được vị trí của người dùng dễ dàng thông qua Google Map.

Để đơn giản hóa, chúng ta sử dụng 2 file index.html – có nhiệm vụ lấy vị trí người dùng thông qua HTML5 Geolocation API, getLocation.php – làm nhiệm vụ kết nối với Google Map và cho ra kết quả là vị trí hiện tại của người dùng. Chúng ta sẽ thực hiện chúng như sau:

Lấy vị trí người dùng thông qua HTML5 Geolocation API

Trong ví dụ này, đầu tiên tôi sẽ lấy vị trí (kinh độ, vĩ độ) của người dùng thông qua HTML5 Geolocation API. Sau đó, bằng cách sử dụng AJAX, tôi gửi thông tin đến getLocation.php để xử lý và lấy về là thông tin địa điểm của người dùng. Tiếp theo, tôi sẽ hiển thị thông tin này ra.

Javascript

Phương thức getCurrentPosition() được sử dụng để lấy địa điểm của người dùng, còn phương thức showLocation() được tôi sử dụng để hiển thị thông tin về vị trí sau khi đã xử lý trong getLocation.php.

[code language=”html”] <script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLocation);
} else {
$(‘#location’).html(‘Geolocation is not supported by this browser.’);
}
});

function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$.ajax({
type:’POST’,
url:’getLocation.php’,
data:’latitude=’+latitude+’&longitude=’+longitude,
success:function(msg){
if(msg){
$("#location").html(msg);
}else{
$("#location").html(‘Not Available’);
}
}
});
}
</script>
[/code]

HTML

Chúng ta sử dụng cặp thẻ span có ID #location để hiển thị thông tin. Cái này đơn giản :D

[code]<p>Your Location: <span id="location"></span></p>[/code]

getLocation.php

Tiếp theo, để có thể lấy được nội dung chúng ta cần lập trình file getLocation.php. Phần code này chúng ta có thể xử lý bằng ngôn ngữ PHP

[code lang=”php”] <?php
if(!empty($_POST[‘latitude’]) && !empty($_POST[‘longitude’])){
//Send request and receive json data by latitude and longitude
$url = ‘http://maps.googleapis.com/maps/api/geocode/json?latlng=’.trim($_POST[‘latitude’]).’,’.trim($_POST[‘longitude’]).’&sensor=false’;
$json = @file_get_contents($url);
$data = json_decode($json);
$status = $data->status;
if($status=="OK"){
//Get address from json data
$location = $data->results[0]->formatted_address;
}else{
$location = ”;
}
//Print address
echo $location;
}
?>
[/code]

Đoạn mã này không khó và cũng rất dễ thực hiện. Bạn có thể lưu lại(bookmark) bài viết này để có thể xem lại và sử dụng khi cần.