Đang tải... (xem toàn văn)
Ứ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 Hiện nay, tình trạng giao thông ngày phức tạp Vấn đề đặt tìm thấy đường tốt để thuận tiện việc lại Đặc biệt, vào đợt thi Đại học, thí sinh hầu hết từ vùng miền khác đến cụm thi nên việc hướng dẫn đường cho bạn vấn đề đáng lưu tâm Với bùng nổ Internet, nhiều đồ xây dựng Tuy nhiên, hầu hết đồ tiếng Google Maps, Vietbando, … hướng tất người dùng nên hướng dẫn chi tiết cho nhóm người đó, cụ thể phụ huynh, thí sinh kì thi đại học Là sinh viên trường Đại học Giao thông vận tải Thành phố Hồ Chí Minh, thí sinh dự thi đại học, phần hiểu khó khăn việc tìm đường đến cụm thi Và điều thúc định xây dựng ứng dụng nhằm hỗ trợ cho bậc phụ huynh, thí sinh tình nguyện viên tham gia “Tiếp sức mùa thi” trường Đại học Giao Thông Vận Tải Thành Phố Hồ Chí Minh khu vực quận Bình Thạnh, thành phố Hồ Chí Minh Chúng vui đóng góp phần sức giúp đỡ nhà trường kì thi đại học tới TÓM TẮT NỘI DUNG Chương 1: Tổng quan ứng dụng hướng dẫn giao thông 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 đỡ hướng dẫn tận tình việc xây dựng ứng dụng Chúng em gửi lời cảm ơn đến Ban lãnh đạo nhà trường tổ chứ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 ứng dụng khác 1.1.1 Đối với đồ thông thường: Các đồ thông thường cập nhật cho người sử dụng tình trạng đường mà muốn đến Mặt khác, thông thường cho thấy đường cách trực quan ước lượng thời gian 1.1.2 Đối với số hệ thống online: Các hệ thống đồ online hầu hết hệ thống lớn Google Maps, Yahoo Maps… Đây vừa ưu điểm, vừa nhược điểm hệ thống chúng xây dựng cho tất người dùng nên hướng dẫn cụ thể cho thí sinh, phụ huynh tình nguyện viên tiếp sức mùa thi trường Đại học Giao thông vận tải thành phố Hồ Chí Minh 1.2 Giải pháp Để giúp đỡ thí sinh, phụ huynh bạn tình nguyện viên việc hướng dẫn đường đến cụm thi (hoặc cụm tiếp sức mùa thi cụm thi) trường Đại học Giao thông vận tải thành phố Hồ Chí Minh, nhóm xây dựng ứng dụng dựa Google Maps API Ứng dụng giúp tìm đường tốt Vậy đường tốt? Đường tốt đường thông thường phải đảm bảo tiêu chuẩn: Có thời gian ngắn, gặp chướng ngại vật, tốn chi phí, dễ tìm, v.v Tùy theo mục đích người mà họ hiểu đường tốt khác với tiêu chuẩn khác Chẳng hạn: Người bán hàng cho đường bán nhiều sản phẩm đường tốt Người phát thư cho cần đường cho tiết kiệm chi phí, có qua điểm cần đưa thư mà tổng thời gian ngắn đường tốt v.v Vậy thì, thí sinh phụ huynh- người dùng mà phần lớn người không quen thuộc đường đoạn đường tốt? Theo nhóm chúng tôi, đường dễ tìm (không phải đường hẻm), thời gian khoảng cách tương đối ngắn 1.3 Lựa chọn công nghệ 1.3.1 Ngôn ngữ sử dụng 1.3.2 Ngôn ngữ sử dụng: HTML Môt tả ngôn ngữ HTML từ viết tắt Hypertext Markup Language, ngôn ngữ đánh dấu siêu văn HTML dễ sử dụng dùng phổ biến Một file HTM file text gồm nhiều thẻ (tag) nhỏ, chúng hướng dẫn trình duyệt (Browser) phải hiển thị trang web CHƯƠNG 2: GIỚI THIỆU VỀ GOOGLE MAPS API 2.1 Google Maps API gì? Google maps dịch vụ ứng dụng công nghệ đồ trực tuyến web miễn phí cung cấp Google Hỗ trợ nhiều dịch vụ khác Google bật dẫn đường, cho phép thấy đồ đường sá, đường cho xe đạp, cho người xe hơi, địa điểm kinh doanh khu vực khấp nơi giới Maps API gì? Đó phương thức cho phép website B sử dụng dịch vụ đồ site A (gọi Maps API) nhúng vào website (site B) Site A Google Maps, site B trang web cá nhân tổ chức muốn sử dụng dịch vụ Google, rê chuột, room đánh dấu đồ … Các ứng dụng xây dựng maps nhúng vào trang web cá nhân thông qua thể javascripts việc sử dụng API google dể dàng 2.2 Một số ứng dụng xây dựng: Đánh dấu điểm đồ thông tin cho địa điểm: khu vui chơi giải trí, nhà hàng, khách sạn, quán ăn ngon,các shop quần áo nữ trang, … Chỉ dẫn đường đến địa điểm cần tìm, dẫn đường giao thông công cộng, địa điểm cung cấp Khoanh vùng khu vực: trung tâm kinh tế, khu đô thị, ô nhiễm, … Tình trạng thông khu vực … CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 3.1 Tạo đồ: Để load đồ, dùng đoạn Javascript đặt thẻ sau: Tiếp đến cần hàm khởi tạo map sau: var map; function initialize() { var Options = { zoom: 14, center: new google.maps.LatLng(10.804822, 106.716670), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("div_id"), Options); Trong đó: Tùy chọn Options có thuộc tính sau: Center: Là điểm trung tâm đồ mà muốn xây dựng với hai thông số vĩ độ (Latitudes) kinh độ (Longitudes) Zoom: Là độ phóng đại đồ mapTypeID: loại đồ hiển thị sau load xong, bao gồm loại roadmap (bản đồ đường đi), satellite (bản đồ vệ tinh), hybrid (bản đồ phối hợp loại trên) terrain (bản đồ địa hình) Đối tượng map tạo có tùy chọn xác định id div_id Sau đâu hình kết quả: 3.2 Đánh dấu cụm thi: Để đánh dấu cụm thi, việc cần xác định tọa độ điểm thi Sau bảng tọa độ cụm thi 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 ĐH Tọa độ GTVT Số đườ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 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 Đườ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 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 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 không HCM 106°43'46.1"E phải cụm thi) 10.792285, 106.7319231 Sau lấy tọa độ, đánh dấu điểm đồ Cách làm gọi 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 thuộc tính quan trọng bắt buộc phải có quy định tọa độ đánh - dấu Map thuộc tính tùy chọn khai báo thay cho - Markers.setMap(map) Icon thuộc tính tùy chọn nhằm thay hình ảnh mặc định Title tiêu đề Draggable: thuộc tính động, nhận giá trị true Animation: kiểu động Sau đó, tạo infowindow 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 hình kết quả: 3.3 Xác định vị trí tại: Để tìm đường đi, ta phải xác định vị trí cách dùng hàm getLocation() 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; } Hàm trả tọạ độ vị trí chúng ta: 14 Trong Latitude vĩ độ, Longgitude kinh độ 3.4 Chỉ dẫn đường đồ: Chúng sử dụng service google chức dẫn đường direction Cụ thể với đoạn code javascripts 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, vẽ đoạn đường hai điểm cố định Sau xác định thời gian độ 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 hoàn chỉnh code, dùng CSS, CSS3 để chỉnh sửa giao diện cho hợp lý Bố cục gồm phần: + Bên trái khung chọn đường thông tin khoảng cách thời gian + Bên phải Map Người dùng chọn cụm thi mà muốn đến Sau ứng dụng xác định tọa độ bạn đứng để dẫn đường tốt từ vị trí bạn đến cụm thi chọn Người dùng xem đồ thông thường chế độ mặc định, xem đồ vệ tinh cách ấn vào tab vệ tinh Nếu muốn phóng to thu nhỏ hình ảnh, người dùng kéo thu phóng phía bên trái đồ 17 Thông tin cụm thi hiển thị, đó, phụ huynh thí sinh đến địa liên lạc tới cụm tiếp sức cần CHƯƠNG 4: KẾT LUẬN 4.1 Đánh giá chung ứng dụng: So với với ứng dụng trước, ứng dụng việc hỗ trợ chương trình “tiếp sức mùa thi” Đáp ứng nhu cầu thực tế, mang lại lợi ích cho thí sinh kỳ thi tuyển sinh đại học 4.2 Kết đạt được: ứng dụng tương đối hoàn chỉnh chức bản: Chạy 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 đường 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 chưa thực tế chưa thể xác định xác tình trạng đoạn đường Chưa mô tả giao thông đường đến cụm thi CHƯƠNG 5: HƯỚNG PHÁT TRIỂN ĐỀ TÀI Xây dựng trang web hoàn thiện mặt giao diện chức Xây dựng thêm sở liệu để lấy thông tin xác đoạn đường Mở rộng quy mô không hướng dẫn đường đến cụm tiếp sức mùa thi trường Đại học Giao thông vận tải thành phố Hồ Chí Minh mà cho trường khác địa bàn thành phố Phát triển lên cho thiết bị di động dụng định vị GPS TÀI LIỆU THAM KHẢO Tài liệu mà tham khảo lấy từ: https://developers.google.com/maps/ http://www.w3schools.com/ 19 [...]... 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... đượ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... 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... 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... else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; } 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ụ... 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... 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,... 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();