Học HTML5 cơ bản- Tìm hiểu Geolocation HTML5

Bài hôm trước đã kết thúc một loạt các vấn đề liên quan đến HTML5 Media, thì bài viết hôm nay Công ty thiet ke web chuyen nghiep OSVN sẽ chuyển sang một chuyên mục mới của HTMl5, đó là HTML5 APIs.

APIs là gì?
(API – Application Programming Interface)- Một giao diện ứng dụng lập trình: là một tập các lệnh và các tiêu chuẩn lập trình để truy cập ứng dụng phần mềm. Với API, bạn có thể thiết kế các sản phẩm được hỗ trợ bởi dịch vụ mà API cung cấp.

HTML5 Geolocation là gì?




Geolocation là một API mới của HTML5 cho phép bạn truy cập vào vị trí hiện tại của bạn trên thiết bị.

Geolocation gồm 3 phương thức:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Định vị địa lý

Sử dụng Geolocation API (API Định vị địa lý) để xác định và chia sẻ các vị trí địa lý. API này trả về các tọa độ kinh độ và vĩ độ thông tin mà các doanh nghiệp có thể sử dụng để cung cấp dịch vụ trong vùng gần đúng tọa độ. Những dịch vụ này thường được gọi là các dịch vụ dựa vào vị trí (LBS – Location-Based Services).

Định vị địa lý hoạt động như thế nào?

Geolocation API (API Định vị địa lý) được dựa vào một đặc tính của đối tượng navigator chung navigator.geolocation. Đối tượng JavaScript navigator cung cấp thông tin có ích về trình duyệt và hệ thống của khách truy cập. Việc định vị địa lý có thể xác định vĩ độ và kinh độ bằng các địa chỉ IP, cơ sở dữ liệu dựa trên web, các kết nối mạng không dây, và công nghệ phép đo tam giác hoặc Hệ thống định vị toàn cầu GPS.
Cùng đi sâu hơn về 3 phương thức của HTML5 Geolocation nhé

Lấy vị trí hiện tại của thiết bị: navigator.geolocation.getCurrentPosition()

Phương thức getCurrentPosition() lấy ra vị trí hiện tại của người dùng, nhưng chỉ một lần
Phương thức getCurrentPosition() có thể có đến ba đối số:

• geolocationSuccess. Gọi lại với vị trí hiện tại (bắt buộc)
• geolocationError. Gọi lại nếu có một lỗi (tùy chọn)
• geolocationOptions. Các tùy chọn định vị địa lý (tùy chọn)

Ví dụ:

<p id=”demo”>Click the button to get your coordinates:</p>

<button onclick=”getLocation()”>Try It</button>

<script>
var x = document.getElementById(“demo”);

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = “Geolocation is not supported by this browser.”;
}
}

function showPosition(position) {
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>

Giải thích ví dụ:

- Kiểm tra nếu là Geolation hỗ trợ, chạy phương thức getCurrentPosition (). Nếu không, hiển thị một thông báo cho người sử dụng
- Nếu phương thức getCurrentPosition () thành công, nó sẽ trả về một tọa độ với các chức năng quy định trong tham số (showPosition)
- Các showPosition () được hiển thị theo vĩ độ và kinh độ

Ví dụ trên là một kịch bản Geolocation rất cơ bản, không có xử lý lỗi.

Khi thiết kế website bạn cần cho phần định vị vị trí hiện tại, cũng đọc rõ các phần nhé

Cho phép khởi tạo một xử lí khi thiết bị thay đổi vị trí: navigator.geolocation.watchPosition();

Phương thức watchPosition() thăm dò vị trí người dùng một cách thường xuyên, theo dõi để xem liệu vị trí người dùng đã thay đổi chưa.

Xóa xử lí được khởi tạo trước đó bởi watchPosition(): navigator.geolocation.clearWatch()

Phương thức clearWatch() có tác dụng kết thúc một phương thức watchPosition() đang diễn ra. Phương thức này có thể chỉ có một đối số. Khi được gọi, nó tìm đối số watchID đã khởi động trước đây và ngưng ngay nó lại.

Hiển thị kết quả trong một bản đồ
Để hiển thị kết quả trong một bản đồ, bạn cần truy cập vào một dịch vụ bản đồ có thể sử dụng vĩ độ và kinh độ, như Google Maps:
Ví dụ:

<p id=”demo”>Click the button to get your position:</p>

<button onclick=”getLocation()”>Try It</button>

<div id=”mapholder”></div>

<script>
var x = document.getElementById(“demo”);

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} else {
x.innerHTML = “Geolocation is not supported by this browser.”;
}
}

function showPosition(position) {
var latlon = position.coords.latitude+”,”+position.coords.longitude;

var img_url = “http:// maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;
document.getElementById(“mapholder”).innerHTML = “<img src=’”+img_url+”‘>”;
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = “User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = “Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML = “The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML = “An unknown error occurred.”
break;
}


Trong ví dụ trên, chúng tôi sử dụng dữ liệu vĩ độ và kinh độ để hiển thị các vị trí trong bản đồ Google (sử dụng một hình ảnh tĩnh) Google Map Script. Để hiển thị một bản đồ tương tác với một điểm đánh dấu sử dụng zoom và các tùy chọn kéo.

Bài viết trên đây OSVN- Công ty thiết kế website chuyên nghiệp chuan SEO đã giới thiệu đến các bạn Tổng quan về HTML5 APIs, HTML5 Geolocation. Rất mong nhận được nhiều đóng góp từ mọi người!