HTML5 Geolocation và Leaflet

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

** 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:

avatar

Đặng Văn Thanh

Có đam mê về lập trình web và các vấn đề về phát triển web.
comments powered by Disqus