NHANWEB

Tính khoảng cách giữa 2 địa điểm bằng Google Maps API

Nguyễn Duy Nhân
  1. Khoảng cách từ một địa điểm A đến một địa điểm B là bao nhiêu km ?
  2. Đi từ đây đến vị trí đó bao xa ?
  3. Những nhà hàng/khách sạn/quán cafe nào gần một địa điểm tôi sắp đến ?

Rất nhiều câu hỏi mang tính thực tế cao nhưng đại đa số lập trình viên khó có thể trả lời bởi bạn không có đủ lượng data cần thiết cho các phép tính phức tạp.Những gì chúng ta sắp làm sẽ thực hiện dựa vào ứng dụng mở rộng của Google Map(Google Map API). Nói một cách khác, tut này sẽ hướng dẫn bạn chuyển đổi từ một địa chỉ cụ thể thành dữ liệu số của Google Map để xác định cụ thể vị trí, sau đó tính toán khoảng cách giữa 2 vị trí trên Google Map và trả kết quả lại cho người dùng.

Xây dựng HTML

Để đơn giản hóa, tôi chỉ xây dựng một đoạn mã HTML nhỏ trong đó cho phép người dùng nhập vào 2 địa chỉ và tính toán khoảng cách giữa 2 địa chỉ này. Đoạn mã HTML của tôi như sau:





Google Maps JavaScript API

Trong đoạn code trên bạn có thể dễ dàng nhận ra có 2 hàm sẽ được gọi trong 2 tình huống khác nhau:

Form trên cũng bình thường như bất cứ form nào mà bạn đã làm.

Javascript

Bây giờ chúng ta sẽ đi chi tiết hơn vào phần code Javascritp giúp lấy và tương tác dữ liệu với Google Map API để lấy dữ liệu như tôi đã nói ở trên. Trước tiên, để bắt đầu chúng ta cần khai báo API, tôi bật tính năng Google Map API v2, bạn có thể bật thêm các tính năng khác nêu muốn. Sau khi bật xong tính năng, bạn sẽ có được API key tương ứng như hình sau:

Tiếp theo, hãy thêm đoạn mã sau vào thẻ header:

Phần you_api_key bạn nhớ thay bằng key của bạn nhé, nếu không được làm siêng cho lắm, bạn có thể sử dụng API key của tôi như dưới đây, tuy nhiên mỗi ngày với mỗi API key bạn chỉ có thể request 25.000 lần nên bạn nên tạo API key riêng để sử dụng nhiều hơn con số đó:



Vậy là xong bước đầu tiên.


Tiếp theo, để thuận tiện cho việc sử dụng, tôi khai báo 3 biến global để sử dụng như sau:






Trong đó, biến geocoder tôi sử dụng lưu trữ đối tượng API để truy xuất, biến location1 và location2 dùng để lưu tọa độ đã được số hóa do Google Map trả về. Với 2 toạ độ này, tôi có thể tính toán ra khoảng cách dễ dàng.


Chúng ta tiếp tục viết hàm khởi khởi tạo initialize() khi trang được tải lên. Nội dung hàm này như sau:


function initialize() {
geocoder = new GClientGeocoder();
}



Tôi tiếp tục viết hàm ShowLocation() để lấy về tọa độ của 2 địa điểm. Sau khi lấy về tọa độ 2 điểm tôi sẽ bổ sung thêm phương thức calculateDistance() để tính toán và ghi ra kết quả khoảng cách:


function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the first address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the second address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
calculateDistance();
}
});
}
});
}
[/code]
Hàm calculateDistance() tôi viết như sau
[code language=”js”] function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(location1.lat, location1.lon);
var glatlng2 = new GLatLng(location2.lat, location2.lon);
var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);

document.getElementById(‘results’).innerHTML = ‘Địa chỉ 1: ’ + location1.address + ‘
Địa chỉ 2: ’ + location2.address + ‘
Khoảng cánh: ’ + miledistance + ‘ miles (or ‘ + kmdistance + ‘ km)’;
}
catch (error)
{
alert(error);
}
}



Hàm calculateDistance() tôi viết như sau


function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(location1.lat, location1.lon);
var glatlng2 = new GLatLng(location2.lat, location2.lon);
var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);

document.getElementById('results').innerHTML = '<strong>Địa chỉ 1: </strong>' + location1.address + '<br /><strong>Địa chỉ 2: </strong>' + location2.address + '<br /><strong>Khoảng cánh: </strong>' + miledistance + ' miles (or ' + kmdistance + ' km)';
}
catch (error)
{
alert(error);
}
}



Vậy là hàm calculateDistance() sẽ lấy 2 biến dạng toàn cục(global) location1 và location2 sau đó sử dụng API để lấy về kết quả dạng mile hoặc dạng km để hiển thị cho người dùng thông qua việc innerHTML vào id results.


Đoạn mã hoàn chỉnh của chúng ta sẽ như sau:






Google Maps JavaScript API























Ứng dụng


Sử dụng cách này bạn có thể bổ sung thêm tính năng cho website của bạn, giúp website của bạn tiện ích hơn cho người dùng rất nhiều. Ví dụ, một website tuyển dụng, việc làm có thể sử dụng địa chỉ công ty đăng tuyển dụng, kết hợp với địa chỉ tạm trú dựa vào CV ứng viên để tỉnh ra khoảng cách tương đương từ nhà đến công ty. Có thêm thông tin này, người tìm việc sẽ có thể dễ dàng quyết định nộp hồ sơ vào công ty nào thì phù hợp hơn.


Hoặc nếu website của bạn là một trang rao vặt và người dùng sử dụng điện thoại có GPS, bạn có thể lấy vị trí hiện tại của người dùng kết hợp với địa chỉ của người đăng tin để hiển thị những kết quả tìm kiếm ở gần người mua nhất kèm với khoảng cách tương đương. Quá tiện ích, quá tuyệt vời phải không


Mở rộng hơn, người dùng của bạn đang cần tìm mua một chiếc IPhone và truy cập vào website bạn, bạn có thể thông báo cho họ danh sách những người bán Iphone gần bạn nhất. Ối trời ơi, tuyệt vời


Vài ý tưởng mở rộng giúp bạn phát triển và ứng dụng vào website của bạn. Hi vọng với tut này bạn sẽ còn làm được nhiều hơn thế nữa.

	


	






		

			
				Exit mobile version