Ứng dụng hướng dẫn giao thông trong tiếp sức mùa thi

Ứng dụng hướng dẫn giao thông trong tiếp sức mùa thi

MỤC LỤC

LỜI MỞ ĐẦU 4

TÓM TẮT NỘI DUNG 5

LỜI CẢM ƠN 6

CHƯƠNG 1: TỔNG QUAN VỀ HỆ THỐNG HƯỚNG DẪN ĐƯỜNG ĐI TỐT TRONG VIỆC HỖ TRỢ CÁC THÍ SINH VÀ PHỤ HUYNH TRONG CHƯƠNG TRÌNH TIẾP SỨC MÙA THI 7

1.1 Nhược điểm của ứng dụng khác 7

1.1.1 Đối với các bản đồ thông thường: 7

1.1.2 Đối với một số hệ thống online: 7

1.2 Giải pháp 7

1.3 Lựa chọn công nghệ 8

1.3.1 Ngôn ngữ sử dụng 8

1.3.2 Môt tả ngôn ngữ 8

CHƯƠNG 2: GIỚI THIỆU VỀ GOOGLE MAPS API 8

2.1 Google Maps API là gì? 8

2.2 Một số ứng dụng có thể xây dựng: 9

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 10

3.1 Tạo bản đồ: 10

3.2 Đánh dấu các cụm thi: 12

3.3 Xác định vị trí hiện tại: 17

3.4 Chỉ dẫn đường trên bản đồ: 18

CHƯƠNG 4: KẾT LUẬN 22

4.1 Đánh giá chung về ứng dụng: 22

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

4.3 Hạn chế: 22

CHƯƠNG 5: HƯỚNG PHÁT TRIỂN ĐỀ TÀI 23

TÀI LIỆU THAM KHẢO 23

LỜI MỞ ĐẦU

Hiện nay, tình trạng giao thông ngày càng phức tạp Vấn đề đặt ra là làm sao có thể tìmthấy đường đi tốt để thuận tiện trong việc đi lại Đặc biệt, vào các đợt thi Đại học, các thí sinh hầu hết từ những vùng miền

khác nhau đến các cụm thi nên việc hướng dẫn đường đi cho các bạn là một vấn đề đáng lưu tâm

Với sự bùng nổ của Internet, rất nhiều bản đồ đã được xây dựng Tuy nhiên, hầu hết các bản đồ nổi tiếng như Google Maps, Vietbando, … hướng tất cả mọi người dùng nên không thể hướng dẫn chi tiết cho một nhóm người nào đó, cụ thể là phụ huynh, thí sinh trong kì thi đại học

Là sinh viên của trường Đại học Giao thông vận tải Thành phố Hồ Chí Minh, chúng tôi

đã từng là thí sinh dự thi đại học, và chúng tôi cũng phần nào hiểu được sự khó khăn trong việc tìm đường đến các cụm thi Và điều này thôi thúc chúng tôi quyết định xây dựng một ứng dụng mới nhằm hỗ trợ cho bậc phụ huynh, thí sinh và các tình nguyện viên tham gia “Tiếp sức mùa thi” của trường Đại học Giao Thông Vận Tải Thành Phố

Hồ Chí Minh tại khu vực quận Bình Thạnh, thành phố Hồ Chí Minh

Chúng tôi rất vui vì đã đóng góp một phần sức mình giúp đỡ nhà trường trong kì thi đạihọc sắp tới

TÓM TẮT NỘI DUNG

Chương 1: Tổng quan về ứng dụng hướng dẫn giao thông trong tiếp sức mùa thi

Chương 2: Giới thiệu google maps api

Chương 3: Xây dựng ứng dụng

Chương 4: Kết luận

Chương 5: Hướng phát triển đề tài

Tài liệu tham khảo

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn thầy giáo Thạc sỹ Nguyễn Lương Anh Tuấn đã giúp

đỡ và hướng dẫn tận tình trong việc xây dựng ứng dụng Chúng em cũng gửi lời cảm

ơn đến Ban lãnh đạo nhà trường đã tổ chức cuộc thi “Ý tưởng sinh viên giao thông”đầy bổ ích

CHƯƠNG 1: TỔNG QUAN VỀ HỆ THỐNG HƯỚNG DẪN ĐƯỜNG ĐI TỐT TRONG VIỆC HỖ TRỢ CÁC THÍ SINH VÀ PHỤ HUYNH TRONG CHƯƠNG

TRÌNH TIẾP SỨC MÙA THI

1.1 Nhược điểm của ứng dụng khác

1.1.1 Đối với các bản đồ thông thường:

Các bản đồ thông thường không thể cập nhật cho người sử dụng tìnhtrạng đường đi mà chúng ta đang muốn đến Mặt khác, bản thông thường khôngthể cho thấy đường đi một cách trực quan cũng như không thể ước lượng thờigian đi được

1.1.2 Đối với một số hệ thống online:

Các hệ thống bản đồ online hiện nay hầu hết là những hệ thống lớn nhưGoogle Maps, Yahoo Maps… Đây vừa là ưu điểm, vừa là nhược điểm của các

hệ thống này vì chúng được xây dựng cho tất cả mọi người dùng nên không thểhướng dẫn cụ thể cho thí sinh, phụ huynh và các tình nguyện viên tiếp sức mùathi của trường Đại học Giao thông vận tải thành phố Hồ Chí Minh

1.2 Giải pháp

Để có thể giúp đỡ các thí sinh, phụ huynh và các bạn tình nguyện viên trongviệc hướng dẫn đường đi đến các cụm thi (hoặc cụm tiếp sức mùa thi nhưng khôngphải cụm thi) của trường Đại học Giao thông vận tải thành phố Hồ Chí Minh, nhómchúng tôi đã xây dựng một ứng dụng dựa trên Google Maps API Ứng dụng này sẽgiúp tìm một đường đi tốt

Vậy thế nào là một đường đi tốt? Đường đi tốt là một đường đi thông thườngphải đảm bảo ít nhất một trong những tiêu chuẩn: Có thời gian đi ngắn, ít gặpchướng ngại vật, tốn ít chi phí, dễ tìm, v.v Tùy theo mục đích của con người mà họ

sẽ hiểu đường đi tốt là khác nhau với những tiêu chuẩn khác nhau Chẳng hạn:Người bán hàng sẽ cho rằng đường đi nào bán được nhiều sản phẩm của mình sẽ làđường tốt Người phát thư cho rằng cần đường đi sao cho tiết kiệm chi phí, có điqua các điểm cần đưa thư mà tổng thời gian ngắn là đường đi tốt v.v Vậy thì, đốivới thí sinh và phụ huynh- những người dùng mà phần lớn là người không quenthuộc đường đi thì đoạn đường như thế nào là tốt? Theo nhóm chúng tôi, đó là conđường dễ tìm (không phải đường hẻm), thời gian đi và khoảng cách là tương đốingắn

1.3 Lựa chọn công nghệ

1.3.1 Ngôn ngữ sử dụng

Ngôn ngữ chính được sử dụng: HTML1.3.2 Môt tả ngôn ngữ

HTML là từ viết tắt của Hypertext Markup Language, là ngôn ngữ đánhdấu siêu văn bản HTML rất dễ sử dụng và được dùng phổ biến Một file HTM

là một file text gồm nhiều thẻ (tag) nhỏ, và chúng hướng dẫn trình duyệt(Browser) phải hiển thị trang web đó như thế nào

CHƯƠNG 2: GIỚI THIỆU VỀ GOOGLE MAPS API

2.1 Google Maps API là gì?

 Google maps là dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên webmiễn phí được cung cấp bởi Google Hỗ trợ nhiều dịch vụ khác của Googlenổi bật là dẫn đường, nó cho phép thấy bản đồ đường sá, đường đi cho xeđạp, cho người đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vựccũng như khấp nơi trên thế giới

 Maps API là gì?

 Đó là những phương thức cho phép một website B sử dụng dịch vụ bản

đồ của site A (gọi là Maps API) và nhúng vào website của mình (site B).Site A ở đây là Google Maps, site B là các trang web cá nhân hoặc tổchức muốn sử dụng dịch vụ của Google, có thể rê chuột, room đánh dấutrên bản đồ …

 Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhânthông qua các thể javascripts do vậy việc sử dụng API google rất dểdàng

2.2 Một số ứng dụng có thể xây dựng:

 Đánh dấu các điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vuichơi giải trí, nhà hàng, khách sạn, các quán ăn ngon,các shop quần áo nữtrang, …

 Chỉ dẫn đường đến các địa điểm cần tìm, chỉ dẫn đường giao thông côngcộng, có thể là các địa điểm cung cấp như trên.

 Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khi ô nhiễm, …

} var map = new google.maps.Map(document.getElementById("div_id"),Options);

</script>

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

10°48'17.4"N 106°43'00.0"E 10.804822, 106.716679

Trường ĐH GTVT

TPHCM CS3

Số 70 đường Tô ký,phường Tân Chánh Hiệp,quận 12

10°51'57.4"N 106°37'05.3"E 10.865940, 106.618149

THCS Bình Quới Tây 376A Bình Quới, P.28, Q.

Bình Thạnh, Tp Hồ ChíMinh

10°49'20.6"N 106°44'01.4"E 10.822394, 106.733733

Tiểu học Bình Quới Tây 376 Bình Quới, P.28, Q

Bình Thạnh, Tp Hồ ChíMinh

10°49'23.8"N 106°43'53.6"E 10.823285, 106.731545

Tiểu học Thanh Đa Khu 2 Cư Xá Thanh

Đa, Thanh Đa, Phường 27,

Quận Bình Thạnh, Thànhphố Hồ Chí Minh

10°49'01.8"N 106°43'11.0"E 10.817155, 106.719711

THCS Thanh Đa Cạnh lô L, cư xá Thanh

Đa, Phường 27, Bình

Thạnh, Thành Phố Hồ ChíMinh

10°48'50.2"N 106°43'12.3"E 10.813935, 106.720094

P.27, Q Bình Thạnh

10°48'57.1"N 106°43'18.3"E 10.815853, 106.721746

Tiểu học Chu Văn An Địa chỉ 2 Đường Số 3,

Quận Bình Thạnh, Thànhphố Hồ Chí Minh

10°48'45.6"N 106°42'21.6"E

10.812657, 106.705999

THCS Đống Đa địa chỉ 217, Đường D2,

Phường 25, Quận Bình Thạnh, Thành phố Hồ Chí

Minh

10°48'33.0"N 106°42'58.6"E 10.809167, 106.716268

THCS Lê Văn Tám địa chỉ 107H3, Chu Văn

An, Phường 26, QuậnBình Thạnh, Thành phố

Hồ Chí Minh

10°48'10.8"N 106°41'53.0"E 10.803001, 106.698068

THCS Cù Chính Lan Cạnh lô XI, CX Thanh Đa,

P 27, Q Bình Thạnh, Tp

Hồ Chí Minh

10°48'57.0"N 106°43'02.4"E 10.815841, 106.717345

THPT Nguyễn Hữu Cầu Nguyễn Ảnh Thủ Tân

Xuân, Hóc Môn

10°52'00.5"N 106°36'52.6"E 10.866801, 106.614611

KTX GTVT HCM (Có

cụm tiếp sức nhưng không

phải cụm thi)

17/12 Trần Não, quận 2,HCM

10°47'11.6"N 106°43'46.1"E 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àmnà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 }

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,

content:TenC,maxWidth:800});

Trong đó Latitude là vĩ độ, Longgitude là kinh độ.

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

}, callback);

}

function callback(response, status) {

if (status == google.maps.DistanceMatrixStatus.OK) {

var origins = response.originAddresses;

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.textoutputDiv.innerHTML = 'Khoảng cách: '+ khoangcach + '</br> ThờiGian Đi: ' + thoigian;

}

Sau khi hoàn chỉnh code, chúng tôi dùng CSS, CSS3 để chỉnh sửa giao diện chohợ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 đồ

Thông tin về cụm thi sẽ được hiển thị, do đó, phụ huynh và thí sinh có thể đến đúng địachỉ và cũng có thể liên lạc tới các cụm tiếp sức nếu cần.

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

 Ứ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ạitrường Đại học Giao thông vận tải thành phố Hồ Chí Minh mà còn cho các trườngkhá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 https://developers.google.com/maps/

2 http://www.w3schools.com/