CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Giới thiệu HTML5 Geolocation API và Leaflet truy cập vị trí hiện tại của thiết bị
 |  RoSino18k  
29-05-2016
|
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:
/**
* Lấy vị trí hiện tại của thiết bị
*/
navigator.geolocation.getCurrentPosition();
/**
* Cho phép khởi tạo một xử lí khi thiết bị thay đổi vị trí
*/
navigator.geolocation.watchPosition();
/**
* Xóa xử lí được khởi tạo trước đó bởi watchPosition()
*/
navigator.geolocation.clearWatch();
* Lấy vị trí hiện tại của thiết bị
*/
navigator.geolocation.getCurrentPosition();
/**
* Cho phép khởi tạo một xử lí khi thiết bị thay đổi vị trí
*/
navigator.geolocation.watchPosition();
/**
* Xóa xử lí được khởi tạo trước đó bởi watchPosition()
*/
navigator.geolocation.clearWatch();
Lấy vị trí hiện tại sử dụng Geolocation
Để lấy vị trí hiện tại ta có thể sử dụng phương thức
function success(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
altitude = position.coords.altitude,
accuracy = position.coords.accuracy;
// Hiển thị các thông số về vị trí hiện tại của bạn.
console.log(latitude);
console.log(longitude);
console.log(altitude);
console.log(accuracy);
}
function error() {
console.log('Không thể truy cập đến vị trí hiện tại.');
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
navigator.geolocation.getCurrentPosition(success, error, options);
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
altitude = position.coords.altitude,
accuracy = position.coords.accuracy;
// Hiển thị các thông số về vị trí hiện tại của bạn.
console.log(latitude);
console.log(longitude);
console.log(altitude);
console.log(accuracy);
}
function error() {
console.log('Không thể truy cập đến vị trí hiện tại.');
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
navigator.geolocation.getCurrentPosition(success, error, options);
Leaflet là gì?
Leaflet là một thư viện JavaScript mã nguồn mở cung cấp các tương tác với bản đồ thân thiện với các thiết bị di động.
Cũng như Google Map API. Nhưng Leaflet được thiết kế đơn giản, hiệu quả và dễ sử dụng:
- Dễ dàng tương tác với HTML5 và CSS3.
- Hỗ trợ rất nhiều plugin.
- Tài liệu hướng dẫn về API rất tốt và dễ sử dụng
- Cung cấp đầy đủ các tính năng để tương tác với bản đồ.
Với API của Leaflet ta có thể tương tác với bản đồ một cách linh hoạt hơn. Sau đây là ví dụ làm việc đơn giản với Leaflet
/**
* Khởi tạo bản đồ với "map" div
* với vị trí latitude, longitude và zoom bản đồ
*/
var map = L.map('map', {
center: [latitude, longitude],
zoom: 16
});
/**
* Khởi tạo và hiển thị các lớp trên bản đồ
* Bạn vào Cloudmade.com đăng kí một tài khoản để có thể lấy API
*/
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
key: '760506895e284217a7442ce2efe97797', // Đây là API mình đã đăng kí với cloudmade
styleId: 103288,
maxZoom: 16
}).addTo(map);
/**
* Đánh dấu vị trí trên bản đồ
*/
var maker = L.marker([latitude, longitude]).addTo(map);
// Hiển thị Popup tại vị trí đánh dấu
marker.bindPopup('<p>Tiêu đề...</p>').openPopup();
* Khởi tạo bản đồ với "map" div
* với vị trí latitude, longitude và zoom bản đồ
*/
var map = L.map('map', {
center: [latitude, longitude],
zoom: 16
});
/**
* Khởi tạo và hiển thị các lớp trên bản đồ
* Bạn vào Cloudmade.com đăng kí một tài khoản để có thể lấy API
*/
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
key: '760506895e284217a7442ce2efe97797', // Đây là API mình đã đăng kí với cloudmade
styleId: 103288,
maxZoom: 16
}).addTo(map);
/**
* Đánh dấu vị trí trên bản đồ
*/
var maker = L.marker([latitude, longitude]).addTo(map);
// Hiển thị Popup tại vị trí đánh dấu
marker.bindPopup('<p>Tiêu đề...</p>').openPopup();
→demo:
HTML5 Geolocation và Leaflet
** Ngoài ra, bạn có thể vào những liên kết sau để tìm hiểu thêm về Geolocation và Leaflet:
-
W3 - Geolocation API
-
Developer Mozilla
-
Leaflet API
-
Cloudmade
Nguồn: DangThanh.Org
Lượt xem: 1320 
Đánh giá: 4.5/ 5, 1320 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!