Trong đó: Tùy chọn Options có những thuộc tính sau:
Center: Là một điểm trung tâm của bản đồ mà chúng ta muốn xây dựng với hai thông
số là vĩ độ (Latitudes) và kinh độ (Longitudes).
Zoom: Là độ phóng đại của bản đồ.
mapTypeID: loại bản đồ được hiển thị sau khi load xong, bao gồm 4 loại là roadmap
(bản đồ đường đi), satellite (bản đồ vệ tinh), hybrid (bản đồ phối hợp 2 loại trên) và
terrain (bản đồ địa hình).
Đối tượng map được tạo ra có những tùy chọn trên và được xác định bởi id div_id.
Sau đâu là hình kết quả:

9


3.2 Đánh dấu các cụm thi:
Để đánh dấu một cụm thi, việc đầu tiên chúng ta cần xác định tọa độ của các điểm thi.
Sau đây là bảng tọa độ các cụm thi của trường Đại học Giao thông vận tải Thành phố
Hồ Chí Minh:
Tên trường
Trường

Địa chỉ
ĐH

Tọa độ

GTVT Số 2 đường D3 khu Văn 10°48'17.4"N

TPHCM CS1

thánh bắc, p25 quận Bình 106°43'00.0"E

Thạnh HCM

Trường

ĐH

10.804822, 106.716679

GTVT Số 70 đường Tô ký, 10°51'57.4"N

TPHCM CS3

phường Tân Chánh Hiệp, 106°37'05.3"E
quận 12

THCS Bình Quới Tây

10.865940, 106.618149

376A Bình Quới, P.28, Q. 10°49'20.6"N
Bình Thạnh, Tp. Hồ Chí 106°44'01.4"E
Minh

Tiểu học Bình Quới Tây

10.822394, 106.733733

376 Bình Quới, P.28, Q. 10°49'23.8"N
Bình Thạnh, Tp. Hồ Chí 106°43'53.6"E
Minh


Tiểu học Thanh Đa

Khu

10.823285, 106.731545

2

Cư

Xá Thanh 10°49'01.8"N

Đa, Thanh Đa, Phường 27, 106°43'11.0"E
Quận Bình Thạnh, Thành 10.817155, 106.719711
phố Hồ Chí Minh

10


THCS Thanh Đa

Cạnh lô L, cư xá Thanh 10°48'50.2"N
Đa,

Phường

27,

Bình 106°43'12.3"E


Thạnh, Thành Phố Hồ Chí 10.813935, 106.720094
Minh
THPT Thanh Đa

Cạnh lô G, CX Thanh Đa, 10°48'57.1"N
P.27, Q. Bình Thạnh

106°43'18.3"E
10.815853, 106.721746

Tiểu học Chu Văn An

Địa chỉ 2 Đường Số 3, 10°48'45.6"N
Quận Bình Thạnh, Thành 106°42'21.6"E
phố Hồ Chí Minh

THCS Đống Đa

10.812657, 106.705999

địa chỉ 217, Đường D2, 10°48'33.0"N
Phường

25, Quận

Bình 106°42'58.6"E

Thạnh, Thành phố Hồ Chí 10.809167, 106.716268
Minh

THCS Lê Văn Tám

địa chỉ 107H3, Chu Văn 10°48'10.8"N
An, Phường 26, Quận 106°41'53.0"E
Bình Thạnh, Thành phố 10.803001, 106.698068
Hồ Chí Minh

THCS Cù Chính Lan

Cạnh lô XI, CX Thanh Đa, 10°48'57.0"N
P. 27, Q. Bình Thạnh, Tp. 106°43'02.4"E
Hồ Chí Minh

THPT Nguyễn Hữu Cầu

10.815841, 106.717345

Nguyễn Ảnh Thủ Tân 10°52'00.5"N
Xuân, Hóc Môn

106°36'52.6"E
10.866801, 106.614611

11


KTX GTVT HCM (Có 17/12 Trần Não, quận 2, 10°47'11.6"N
cụm tiếp sức nhưng không HCM

106°43'46.1"E


phải cụm thi)

10.792285, 106.7319231

Sau khi lấy được tọa độ, chúng tôi đánh dấu các điểm đó trên bản đồ. Cách làm
này được gọi là tạo Marker.
var Marker1 = new google.maps.Marker(
{
map:map,
position:new google.maps.LatLng(10.792285, 106.7319231),
title: "KTX DH GTVT TP HCM",
draggable:true,
animation: google.maps.Animation.DROP
}
);

Trong đó:
-

Position là thuộc tính quan trọng nhất và bắt buộc phải có quy định tọa độ đánh

-

dấu
Map là thuộc tính tùy chọn và khai báo như trên sẽ thay thế cho

-

Markers.setMap(map).

Icon là thuộc tính tùy chọn nhằm thay thế hình ảnh mặc định
Title là tiêu đề
Draggable: thuộc tính động, nếu nhận giá trị true
Animation: kiểu động.
Sau đó, chúng tôi tạo một infowindow chính là một cửa sổ chứa thông tin:

var TenC="THCS Đống Đa, SDT: 123456";
//thong tin bo sung ghi vao day
var infowindow = new google.maps.InfoWindow(
{
position:new google.maps.LatLng(10.809167, 106.716268),

12


content:TenC,
maxWidth:800

});
infowindow.open(map, Marker1);

Sau đây là hình kết quả:

3.3 Xác định vị trí hiện tại:
Để tìm được đường đi, ta phải xác định được vị trí hiện tại bằng cách dùng hàm
getLocation() như sau:
function getLocation()

13



{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Hàm này sẽ trả về tọạ độ vị trí của chúng ta:

14


Trong đó Latitude là vĩ độ, Longgitude là kinh độ.
3.4 Chỉ dẫn đường trên bản đồ:
Chúng tôi sử dụng service google và chức năng dẫn đường direction. Cụ thể với
đoạn code javascripts như sau:
var request = {
origin:star,
destination: end1,
travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});

15


Khi sử dụng đoạn Javascript trên, chúng ta sẽ vẽ được một đoạn đường giữa hai
điểm cố định.

Sau đó chúng tôi xác định được thời gian đi và độ dài đoạn đường
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [star,star],
destinations: [end1,end1],
travelMode: google.maps.TravelMode.WALKING,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var origins = response.originAddresses;

16



var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
var results = response.rows[1].elements;
var thoigian= results[1].duration.text;
var khoangcach = results[1].distance.text
outputDiv.innerHTML = 'Khoảng cách: '+ khoangcach + '
Thời Gian Đi: ' + thoigian;
}

Sau khi hoàn chỉnh code, chúng tôi dùng CSS, CSS3 để chỉnh sửa giao diện cho
hợp lý hơn. Bố cục gồm 2 phần:
+ Bên trái là khung chọn đường đi và thông tin khoảng cách và thời gian
+ Bên phải là Map.
Người dùng sẽ chọn cụm thi mà mình muốn đến. Sau đó ứng dụng sẽ xác định
được tọa độ bạn đứng để có thể chỉ dẫn một đường đi tốt từ vị trí của bạn đến cụm thi
đã chọn. Người dùng có thể xem bản đồ thông thường ở chế độ mặc định, hoặc xem
bản đồ vệ tinh bằng cách ấn vào tab vệ tinh. Nếu muốn phóng to hoặc thu nhỏ hình
ảnh, người dùng có thể kéo thanh thu phóng phía bên trái của bản đồ.

17


Thông tin về cụm thi sẽ được hiển thị, do đó, phụ huynh và thí sinh có thể đến đúng địa
chỉ và cũng có thể liên lạc tới các cụm tiếp sức nếu cần.
CHƯƠNG 4: KẾT LUẬN
4.1 Đánh giá chung về ứng dụng:
 So với với các ứng dụng trước, thì ứng dụng này là cái mới trong việc hỗ trợ

chương trình “tiếp sức mùa thi”.
 Đáp ứng được nhu cầu thực tế, mang lại lợi ích cho các thí sinh trong kỳ thi

tuyển sinh đại học.
4.2 Kết quả đạt được: ứng dụng tương đối hoàn chỉnh về các chức năng cơ bản:
 Chạy được trên các trình duyệt, giao diện dể nhìn, dể sử dụng.
18


 Ứng dụng hướng dẫn cho người dùng một đường đi tốt.

4.3 Hạn chế:
 Ứng dụng bắt buộc người dùng phải có kết nối Internet
 Thời gian đi chưa thực tế vì chưa thể xác định chính xác tình trạng của các

đoạn đường.
 Chưa mô tả được giao thông trên đường đến các cụm thi.
CHƯƠNG 5: HƯỚNG PHÁT TRIỂN ĐỀ TÀI
 Xây dựng trang web hoàn thiện hơn về mặt giao diện cũng như chức năng.
 Xây dựng thêm cơ sở dữ liệu để có thể lấy được thông tin chính xác hơn về các

đoạn đường.
 Mở rộng quy mô không chỉ hướng dẫn đường đi đến các cụm tiếp sức mùa thi tại

trường Đại học Giao thông vận tải thành phố Hồ Chí Minh mà còn cho các trường
khác trên địa bàn thành phố.
 Phát triển lên cho các thiết bị di động sự dụng định vị GPS

TÀI LIỆU THAM KHẢO
Tài liệu mà chúng tôi tham khảo được lấy từ:
1. />2. />
19