VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

Geolocation trong HTML5


Audio và Video trong HTML5
Microdata trong HTML5

Nội dung chính

  • Geolocation trong HTML5
  • Phương thức Geolocation
  • Ví dụ
  • Các thuộc tính vị trí
  • Ví dụ
  • Xử lý lỗi
  • Ví dụ
  • Các tùy chọn Position
  • Ví dụ

Geolocation trong HTML5

HTML5 Geolocation API cho bạn chia sẻ vị trí của bạn với các Website ưa thích. Một Javascript có thể nắm bắt được vĩ độ và kinh độ của bạn và có thể được gửi trở lại Webserver và thực hiện nhận biết vị trí như tìm kiếm các doanh nghiệp địa phương hoặc vị trí của bạn trên bản đồ.

Ngày nay hầu hết các trình duyệt và thiết bị Mobile hỗ trợ Geolocation API. Geolocation API làm việc với một thuộc tính mới của đối tượng điều hướng toàn cầu, ví dụ: đối tượng Geolocation mà có thể được tạo như sau:

var geolocation = navigator.geolocation;

Đối tượng Geolocation là một đối tượng dịch vụ cho phép các Widget để đạt được thông tin về vị trí địa lý của thiết bị.



Phương thức Geolocation

Đối tượng Geolocation cung cấp các phương thức sau:

Phương thức Mô tả
getCurrentPosition()

Phương thức này thu nhận vị trí địa lý hiện tại của người dùng.

watchPosition()

Phương thức này thu nhận các cập nhật định kỳ về vị trí địa lý của thiết bị.

clearWatch()

Phương thức này hủy một việc gọi watchPosition đang diễn ra.


Ví dụ

Sau đây là code mẫu để sử dụng trong bất kỳ phương thức trên:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

Tại đây, showLocation và errorHandler là các phương thức gọi lại (callback) mà sẽ được sử dụng để nhận vị trí thực sự như đã giải thích trong phần tiếp theo và để xử lý các lỗi nếu có.



Các thuộc tính vị trí

Các phương thức getCurrentPosition() và getPositionUsingMethodName() xác định phương thức callback mà thu nhận thông tin vị trí. Những phương thức này được gọi không đồng bộ với một đối tượng Position mà lưu thông tin vị trí đầy đủ.

Đối tượng Position xác định vị trí địa lý hiện tại của thiết bị. Vị trí này được biểu diễn như là một tập hợp các tọa độ địa lý cùng với thông tin về heading và tốc độ.

Bảng sau miêu tả các thuộc tính của đối tượng Position. Với các thuộc tính tùy ý, nếu hệ thống không thể cung cấp một giá trị, thì giá trị của thuộc tính được thiết lập là null.

Thuộc tính Kiểu Mô tả
coords objects

Xác định vị trí địa lý của thiết bị. Vị trí này được biểu diễn như là một tập hợp các tọa độ địa lý cùng với thông tin về heading và tốc độ.

coords.latitude Number

Xác định sự ước lượng vĩ độ. Dãy giá trị là [-90.00, +90.00].

coords.longitude Number

Xác định sự ước lượng kinh độ. Dãy giá trị là [-180.00, +180.00].

coords.altitude Number

[Tùy ý] Xác định ước lượng cao độ bằng đơn vị mét trên mặt bầu dục WGS 84.

coords.accuracy Number

[Tùy ý] Xác định độ chính xác của ước lượng vĩ độ bằng đơn vị mét.

coords.altitudeAccuracy Number

[Tùy ý] Xác định độ chính xác của ước lượng cao độ bằng đơn vị mét.

coords.heading Number

[Tùy ý] Xác định hướng hiện tại của thiết bị theo chiều kim đồng hồ liên quan tới giá trị đúng là North

coords.speed Number

[Tùy ý] Xác định tốc độ mặt đất của thiết bị bằng đơn vị m/s

timestamp date

Xác định thời gian khi thông tin vị trí được thu nhận và đối tượng Position được tạo.


Ví dụ

Sau đây là code mẫu mà sử dụng đối tượng Position. Ở đây, phương thức showLocation là một phương thức callback:

function showLocation( position ) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  ...
}


Xử lý lỗi

Geolocation là phức tạp, và nó là cần thiết để phát hiện lỗi và xử lý các lỗi đó:

Các phương thức getCurrentPosition() và watchPosition() sử dụng một phương thức callback xử lý lỗi cho đối tượng PositionError. Đối tượng này có các thuộc tính sau:

Thuộc tính Kiểu Mô tả
code Number

Chứa một code giá trị số cho lỗi

message String

Chứa một miêu tả con người có thể đọc về lỗi.

Bảng sau miêu tả các code lỗi có thể có được trả về trong đối tượng PositionError:

Code Hằng số Mô tả
0 UNKNOWN_ERROR

Phương thức thất bại trong việc thu nhận vị trí của đối tượng do một lỗi nào đó

1 PERMISSION_DENIED

Phương thức thất bại trong việc thu nhận vị trí của thiết bị bởi vì ứng dụng không cho phép sử dụng Location Service.

2 POSITION_UNAVAILABLE

Vị trí của thiết bị không thể xác định được.

3 TIMEOUT

Phương thức không thể thu nhận thông tin vị trí trong khoảng thời gian tối đa đã cho.


Ví dụ

Dưới đây là code mẫu sử dụng đối tượng PositionError. Ở đây phương thức errorHandler là một phương thức callback:

function errorHandler( err ) {
  if (err.code == 1) {
    // access is denied
  }
  ...
}


Các tùy chọn Position

Sau đây là cú pháp thực tế của phương thức getCurrentPosition():

getCurrentPosition(callback, ErrorCallback, options)

Ở đây, tham số thứ 3 là đối tượng PositionOptions xác định một tập hợp các tùy chọn để thu nhận vị trí địa lý của thiết bị:

Sau đây là các tùy chọn có thể được xác định như là tham số thứ ba:

Thuộc tính Kiểu Mô tả
enableHighAccuracy Boolean

Xác định có hay không Widget muốn nhận ước lượng có thể về vị trí chính xác nhất. Theo mặc định nó là False.

timeout Number

Thuộc tính này là số phần nghìn giây (mili giây) ứng dụng web của bạn sẵn lòng đợi cho một vị trí.

maximumAge Number

Xác định thời gian hết hạn bằng đơn vị mili giây cho thông tin vị trí được thu nhận.


Ví dụ

Sau đây là một code mẫu chỉ cách sử dụng các phương thức trên:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler,
                                 {maximumAge: 75000});
}

Audio và Video trong HTML5
Microdata trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml