HTML5: Định vị địa lý (Geolocation)
Giải phóng thời gian, khai phóng năng lực
ĐỊNH VỊ
HTML5 cung cấp kỹ thuật Geolocation cho phép bạn xác định được vị trí của người dùng.
Xác định vị trí người dùng
HTML5 Geolocation API được dùng để lấy vị trí địa lý của người dùng. Tuy nhiên thao tác này có thể xâm phạm đến sự riêng tư của người sử dụng, cho nên mặc định vị trí là không thể được định vị trừ khi được người dùng cho phép.
Trình duyệt hỗ trợ
Internet Explorer 9+, Firefox, Chrome, Safari và Opera đều hỗ trợ khả năng định vị của HTML5.
Lưu ý: Khả năng định vị sẽ chính xác hơn khi áp dụng Geolocation cho các thiết bị có GPS (chẳng hạn như điện thoại iPhone).
Cách thức định vị trong HTML5
Phương thức getCurrentPosition() được dùng để lấy vị trí hiện tại của người dùng.
Dưới đây là một ví dụ đơn giản về việc sử dụng Geolocation để xác định kinh độ và vĩ độ của vị trí người dùng:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Vui lòng click vào nút lệnh để lấy tọa độ (bạn phải cho phép trình duyệt lấy tọa độ):</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
else
x.innerHTML="Trình duyệt này không hỗ trợ Geolocation!";
}
function showPosition(position) {
x.innerHTML="Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude;
}
</script>
</body>
</html>
Giải thích ví dụ:
- Kiểm tra xem Geolocation có được hỗ trợ không.
- Nếu được hỗ trợ thì thực hiện phương thức getCurrentPosition(). Nếu không thì đưa ra thông báo để người dùng biết.
- Nếu phương thức getCurrentPosition() được thực hiện thành công thì nó sẽ trả về một đối tượng chứa tọa độ cho hàm là tham số của nó (trong trường hợp này hàm nhận lại đối tượng tọa độ chính là hàm showPosition()).
- Hàm showPosition() sẽ hiển thị kinh độ (longitude) và vĩ độ (latitude) của vị trí người dùng.
Trên đây là ví dụ rất cơ bản về định vị, trong đó không có phần xử lý lỗi.
Xử lý lỗi và xử lý tình huống bị người dùng từ chối
Tham số thứ hai của phương thức getCurrentPosition() được dùng để xử lý các lỗi. Nó sẽ chỉ định một hàm để chạy nếu có lỗi xảy ra để lấy được vị trí của người dùng. Ví dụ:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click vào nút lệnh để lấy tọa độ của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition,showError);
else
x.innerHTML="Trình duyệt này không hỗ trợ Geolocation.";
}
function showPosition(position) {
x.innerHTML="Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="Người dùng đã từ chối yêu cầu định vị.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Không lấy được thông tin về vị trí.";
break;
case error.TIMEOUT:
x.innerHTML="Hết thời gian yêu cầu lấy thông tin về vị trí người dùng.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Không rõ lỗi.";
break;
}
}
</script>
</body>
</html>
Giải thích các mã lỗi:
- PERMISSION_DENIED – Người dùng không cho phép định vị
- POSITION_UNAVAILABLE – Không xác định được vị trí
- TIMEOUT – Hết thời gian định vị
Hiển thị vị trí trong bản đồ tĩnh
Để hiển thị vị trí trong một bản đồ động, bạn cần truy cập vào một dịch vụ bản đồ có thể sử dụng vĩ độ và kinh độ, chẳng hạn như Google Maps. Sau đây là ví dụ cho phép bạn lấy được vị trí của bạn trong một bản đồ tĩnh.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Hãy click vào nút lệnh để lấy vị trị của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<div id="mapholder"></div>
<div id="point" style="background:red; width:6px; height:6px; position:absolute; border-radius:3px; display:none;"></div>
</div>
<script>
var i=false;
var x=document.getElementById("demo");
function getLocation() {
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition,showError);
else
x.innerHTML="Trình duyệt này không hỗ trợ Geolocation.";
}
function showPosition(position) {
fblink();
var latlon=position.coords.latitude+","+position.coords.longitude;
var rong=400, cao=300;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size="+rong+"x"+cao+"&sensor=false";
var spoint=document.getElementById("showpoint");
var point=document.getElementById("point");
var map=document.getElementById("mapholder");
map.innerHTML = "<img border='0' src='"+img_url+"'>";
}
</script>
</body>
</html>
Ví dụ trên sử dụng các dữ liệu được trả về là vĩ độ và kinh độ để hiển thị vị trí trong bản đồ Google (sử dụng hình ảnh tĩnh). Xin nhấn mạnh lại là ví dụ trên sẽ định chính xác vị trí của bạn nếu bạn dùng thiết bị có cài đặt GPS hoặc thiết bị đó có tính năng định vị tốt.
Giá trị trả về của phương thức getCurrentPosition()
Phương thức getCurrentPosition() sẽ trả về một đối tượng nếu nó thực thi thành công, trong đó các thuộc tính vĩ độ, kinh độ và độ chính xác của vị trí luôn luôn được phương thức trả về. Các thuộc tính khác dưới đây nếu cho phép thì chúng cũng được trả về.
| Thuộc tính | Mô tả |
| coords.latitude | Thuộc tính về vĩ độ (là một số thập phân) |
| coords.longitude | Thuộc tính về kinh độ (là một số thập phân) |
| coords.accuracy | Thuộc tính về độ chính xác của vị trí |
| coords.altitude | Thuộc tính về độ cao (đơn vị là mét) so với mực nước biển trung bình |
| coords.altitudeAccuracy | Thuộc tính về độ chính xác độ cao của vị trí |
| coords.heading | Thuộc tính về tọa độ tính theo chiều kim đồng hồ (gốc là lúc 0 giờ) |
| coords.speed | Thuộc tính về tốc độ (đơn vị là m/s) |
| timestamp | Thuộc tính để lấy ngày/thời gian của phản hồi |
Một số phương thức khác của đối tượng Geolocation
watchPosition(): Trả về vị trí hiện tại của người dùng cũng như vị trí tương ứng khi người dùng di chuyển (chẳng hạn như GPS trong xe hơi).
clearWatch(): Dừng thực thi phương thức watchPosition().
Sau đây là ví dụ về phương thức watchPosition(), nếu bạn muốn kiểm tra thực tế đoạn code này thì bạn cần dùng đến một thiết bị GPS có độ chính xác tốt và nó đang di chuyển (chẳng hạn như điện thoại iPhone đặt trong xe đang di chuyển).
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">Click vào nút lệnh để lấy tọa độ của bạn:</p>
<button onclick="getLocation()">Lấy tọa độ</button>
<script>
var x=document.getElementById("demo");
function getLocation() {
if(navigator.geolocation)
navigator.geolocation.watchPosition(showPosition);
else
x.innerHTML="Trình duyệt này không hỗ trợ khả năng định vị của HTML5.";
}
function showPosition(position) {
x.innerHTML = "Vĩ độ: " + position.coords.latitude + "<br>Kinh độ: " + position.coords.longitude;
}
</script>
</body>
</html>
KÉO và THẢ
Kéo và thả là một phần của chuẩn HTML5. HTML5 hỗ trợ những thao tác này ở tất các phần tử.
Trình duyệt hỗ trợ: Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ những thao tác kéo và thả của HTML5.
Lưu ý: Trình duyệt Safari 5.1.2 không hỗ trợ các thao tác kéo và thả.
Ví dụ về kéo và thả trong HTML5:
<html>
<head>
<meta charset="utf-8">
<style>
#div1{width:350px; height:70px; padding:3px; border:green thin solid; box-sizing:border-box;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData( "Text");
ev.target.appendChild( document.getElementById(data) );
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<br>
<img id="drag1" src="nguồn_ảnh" draggable="true" ondragstart="drag(event)" width="330" height="50" title="Bạn thử kéo ảnh vào ô bên trên nhé!">
</body>
</html>
Ví dụ trên có thế áp dụng cho bất kỳ sự kiện kéo thả nào.
Tạo một phần tử có thể kéo được:
Ta chỉ cần sử dụng thuộc tính draggable và đặt giá trị true cho nó, ví dụ:
Sử dụng sự kiện ondragstart và phương thức setData() để kéo:
Khi bạn nhấn chọn đối tượng và kéo thì sự kiện ondragstart sẽ được kích hoạt, ta thiết lập một lời gọi đến hàm xử lý thao tác kéo (ví dụ dưới đây là hàm drag()).
Trong hàm xử lý thao tác kéo ta sử dụng phương thức dataTransfer.setData() để thiết lập kiểu dữ liệu và giá trị của dữ liệu được kéo như sau:
ev.dataTransfer.setData("Text", ev.target.id);
}
,trong đó kiểu đối tượng ở đây là "Text" và giá trị của đối tượng là id của phần tử được kéo (phần tử được kéo ở đây là ảnh có id="drag1").
Sử dụng sự kiện ondragover để thả:
Khi bạn thả đối tượng ra thì sự kiện ondragover sẽ được kích hoạt, sự kiện này sẽ xác định vị trí của đối tượng sau khi nó được thả.
Theo mặc định thì ta không thể thả một đối tượng vào trong một đối tượng khác. Tuy nhiên ta có thể khắc phục được điều này bằng cách sử dụng phương thức event.preventDefault().
Sự kiện ondrop:
Sự kiện này được kích hoạt khi bạn thả đối tượng. Ta sẽ cho sự kiện ondrop gọi đến phương thức drop() có mã lệnh như sau:
ev.preventDefault();
var data=ev.dataTransfer.getData( "Text");
ev.target.appendChild( document.getElementById(data));
}
Giải thích mã lệnh:
- Phương thức preventDefault() dùng để yêu cầu trình duyệt cho phép thả một đối tượng vào một đối tượng khác.
- Phương thức dataTransfer.getData("Text") được dùng để lấy kiểu đối tượng được kéo. Phương thức này sẽ lấy kiểu đối tượng được xác định từ phương thức setData().
- Đối tượng được kéo tương đương với phần tử có ID được chuyền đi (trong trường hợp này ID="drag1" là của phần tử <img>).
- Đưa phần tử được kéo vào phần tử chứa.
Giải phóng thời gian, khai phóng năng lực