Old school Swatch Watches

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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Giới thiệu HTML5 Geolocation API và Leaflet truy cập vị trí hiện tại của thiết bị

Admin* 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 sử dụng Geolocation

Để lấy vị trí hiện tại ta có thể sử dụng phương thức
navigator.geolocation.getCurrentPosition()

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);


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();


→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: 383
score
Đánh giá: 4.5/ 5, 383 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-383]