Niên luận Tạo website bản đồ du lịch áp dụng GOOGLE MAPS API. Đồng bằng sông Cửu Long nói chung và thành phố Cần Thơ có vị trí địa lý rất thuận lợi, thích hợp với việc phát triển du lịch. Cần thơ được mệnh danh là Tây Đô, trung tâm của miền Tây, thuận lợi về giao thông vận tải đường bộ lẫn đường sông. Với dòng sông Mê Kông chảy qua, Cần Thơ hằng năm được cung cấp một lượng phù sa khổng lồ, không những thế còn tạo nên một hệ thống sông ngòi chằng chịt, với bốn mùa cây hoa trái sum suê. Đây là một lợi thế phát triển du lịch sinh thái. Ngoài ra Cần Thơ còn có rất nhiều những lễ hội dân gian đặc sắc của các dân tộc sinh sống ở địa phương như Kinh, Hoa, Khmer… Thành phố cũng có nhiều di tích lịch sử văn hóa nổi tiếng và đã được công nhận. Tuy nhiên do có rất nhiều địa điểm du lịch nên Cần Thơ nên có thể gây cho khách du lịch sự hoang mang về việc phải chọn địa điểm nào để đến tham quan, cũng như là khách du lịch không biết đến một số địa điểm du lịch mới nhưng chưa được nhiều người biết đến. Đặc biết đối với khách du lịch nước ngoài, việc lựa chọn địa điểm tham quan rất khó khăn do trở ngại ngôn ngữ và đến một thành phố xa lạ nên khó khăn trong việc tìm được một điểm du lịch ưng ý. Với sự phát triển của công nghệ hiện tại, mỗi người đều có một thiết bị với kết nối internet tốc độ cao. Dựa vào đó, ta có thể xây dựng một bản đồ điện tử mà mọi thiết bị đều có thể truy cập, để tham khảo các địa điểm, các khu du lịch ở Cần Thơ hoặc trực tiếp hơn với thiết bị cầm tay có kết nối được với internet, chúng ta vẫn có thể tìm, định vị, chỉ ra được đường đi đến nơi cần đến. Để giải quyết các vấn đề trên, Google Maps API là một trong những giải pháp khả thi và đơn giản trong việc thực hiện.
TRƯỜNG ĐẠI HỌC CẦN THƠ KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG GOOGLE MAPS API ỨNG DỤNG TRONG BẢN ĐỒ DU LỊCH NIÊN LUẬN CƠ SỞ Ngành Công Nghệ Thông Tin 11 - 2017 Mục lục CHƯƠNG I: TỔNG QUAN 1.1 ĐẶT VẤN ĐỀ Đồng sông Cửu Long nói chung thành phố Cần Thơ có vị trí địa lý thuận lợi, thích hợp với việc phát triển du lịch Cần thơ mệnh danh Tây Đô, trung tâm miền Tây, thuận lợi giao thơng vận tải đường lẫn đường sơng Với dòng sông Mê Kông chảy qua, Cần Thơ năm cung cấp lượng phù sa khổng lồ, tạo nên hệ thống sơng ngòi chằng chịt, với bốn mùa hoa trái sum suê Đây lợi phát triển du lịch sinh thái Ngồi Cần Thơ có nhiều lễ hội dân gian đặc sắc dân tộc sinh sống địa phương Kinh, Hoa, Khmer… Thành phố có nhiều di tích lịch sử văn hóa tiếng cơng nhận Tuy nhiên có nhiều địa điểm du lịch nên Cần Thơ nên gây cho khách du lịch hoang mang việc phải chọn địa điểm để đến tham quan, khách du lịch đến số địa điểm du lịch chưa nhiều người biết đến Đặc biết khách du lịch nước ngoài, việc lựa chọn địa điểm tham quan khó khăn trở ngại ngơn ngữ đến thành phố xa lạ nên khó khăn việc tìm điểm du lịch ưng ý Với phát triển công nghệ tại, người có thiết bị với kết nối internet tốc độ cao Dựa vào đó, ta xây dựng đồ điện tử mà thiết bị truy cập, để tham khảo địa điểm, khu du lịch Cần Thơ trực tiếp với thiết bị cầm tay có kết nối với internet, tìm, định vị, đường đến nơi cần đến Để giải vấn đề trên, Google Maps API giải pháp khả thi đơn giản việc thực 1.2 MỤC TIÊU CẦN ĐẠT ĐƯỢC - Tìm hiểu cơng nghệ Google Maps API - Nghiên cứu, hiểu cách hoạt động xây dựng đồ du lịch từ Google Maps JavaScript API 1.3 HƯỚNG GIẢI QUYẾT VÀ KẾ HOẠCH THỰC HIỆN 1.3.1 Hướng giải - Nghiên cứu hiểu rõ khái niệm liên quan đến Google Maps API Google Maps JavaScript API - Từ nguồn tài liệu có sẵn thông tin từ nguồn internet, thực website đơn giản đề hiểu rõ cách hoạt động Google Maps JavaScript API 1.3.2 Kế hoạch thực THỜI GIAN Tuần 5,6 Tuần 7,8,9 Tuần 11,12 CƠNG VIỆC Tìm hiểu Google Maps API thành phần Tìm hiểu cách sử dụng chức thành phần Nghiên cứu xây dựng website hồn chỉnh Viết báo cáo CHƯƠNG 2: NỘI DUNG NGHIÊN CỨU 2.1 CÔNG NGHỆ GOOGLE MAPS API 2.1.1 Tổng quan Google Maps API Maps API phương thức cho phép website (site A) sử dụng dịch vụ đồ Google Maps nhúng vào website (site A), site A website cá nhân tổ chức muốn sử dụng dịch vụ google (di chuột, zoom, marker, directions…) Với đề tài áp dụng Maps API thông qua ngôn ngữ javascript nên dễ dàng xây dựng website Với Google Maps JavaScript API v3 thiết kế để load nhanh thích hợp với thiết bị di động với thao tác đa điểm 2.1.2 Xây dựng đồ đơn giản a Google Maps JavaScript API Key Trước tạo website có sử dụng Maps Api cần phải có key từ Google API Console Vào www console.developers.google.com đăng nhập vào, chọn api mà bạn cần sử dụng Sau tạo project để google hiển thị key Mỗi tài khoản có key riêng key Hình 2.1: Lấy API Key Tiếp theo load đồ website cách đặt code javascript vào website Với YOUR_API_KEY key vừa tạo Với “callback=initMap” gọi hàm initMap (hàm tạo đồ) Hình 2.2: Code gọi đến gói api google maps b Hàm tạo đồ Có thể gọi hàm tạo đồ thực cách lắng nghe kiện onload thông qua script đặt api key Hình 2.3 Hàm thực tạo hiển thị đồ Đối tượng map = google.maps.Map dùng để tạo đồ Có dạng Map(mapDiv,MapOptions) mapDiv id vị trí cần đặt map thân html MapOptions thuộc tính cần thiết để tạo đồ Các thuộc tính hàm initMap(): - center: tâm đồ Với lat, lng kinh độ vĩ độ tâm - zoom độ zoom đồ Ngồi có thuộc tính khác mapTypeId, draggable, backgroundColor, zoomControl,… c Google Maps Event Gồm loại kiện UI Event MVC State change UI Event dùng để lắng nghe kiện từ người dùng MVC State change dùng để lắng nghe kiện từ thay đổi giá trị thuộc tính đồ UI Event: số đối tượng maps thiết kế để đáp ứng với kiện từ người dùng kiện từ chuột bàn phím Ví dụ đối tượng google.maps.Marker lắng nghe kiện như: 'click', 'dbclick', 'drag', 'mouseover',… Hình 2.4 Marker đáp ứng với kiện click để thực set độ zoom MVC State change gồm kiện: - zoom_changed: kiện thực thi ta zoom size map - center_changed: kiện thực thi thuộc tính center map thay đổi - title_changed: kiện thực thi thuộc tính title map thay đổi - heading_changed: kiện thực thi thuộc tính heading map thay đổi - dragstart: kiện thực thi người dùng bắt đầu drag đồ - drag: kiện thực thi người dùng drag đồ - dragend: kiện thực thi người dùng kết thúc drag đồ - maptypeid_changed: kiện thực thi thuộc tính maptypeid map thay đổi Hình 2.5 map lắng nghe kiện thay đổi vị trí center Để đăng kí kiện dùng addListener() Phương thức lấy kiện để lắng nghe hàm gọi kiện xuất Ngồi Maps JavaScript API có cung cấp phương thức addDomListener() để lắng nghe kiện từ DOM Hình 2.6 Thực gọi hàm initMap() với kiện 'load' với DOM element window d Marker Info Windows Marker dùng để xác định vị trí đồ đánh dấu dựa tọa độ (kinh độ vĩ độ) Hình 2.7 Một marker vị trí trường Đại học Cần Thơ Khi thêm marker cần phải khai báo trường càn thiết để xây dựng marker Trường quan trọng bắt buộc phải có position, quy định tọa độ điểm đánh dấu Ngoài có trường: - map: quy định đối tượng đồ đc đánh dấu - animation: cách thức chuyển động marker (drag bounce) - draggable: true false quy định chuyển động hay không marker - title: tiêu đề địa điểm - icon: hình ảnh tùy chọn để hiển thị thay hình ảnh mặc định Hình 2.8 Tạo marker có vị trí trung tâm thành phố Cần Thơ Sau thiết lặp xong thơng tin marker marker.setMap(map) để hiển thị lên đồ (map) Đối tượng Info Window dùng để hiển thị cửa sổ thông tin nằm đồ Google Map, thường dùng để hiển thị thông tin Marker Tuy nhiên hiển thị tạo vị trí đồ InfoWindow khởi tạo thông số gồm: - content: nội dung muốn hiển thị - pixelOffset: Vị trí đỉnh cửa sổ neo, thông số thường để mặc định - position: đối tượng LatLng gồm hai thông số tung độ vỹ độ - maxWidth: Chiều rộng tối đa cửa sổ tính theo pixel Khi khơng thiết đặt info window tự vừa với nội dung cần hiển thị Hình 2.9 Tạo marker kèm với info window 2.2 XÂY DỰNG CƠ SỞ DỮ LIỆU VÀ TẠO BẢN ĐỒ DU LỊCH 2.2.1 Cơ sở liệu Mục tiêu cần đạt tìm hiểu Google Maps API xây dựng website đồ đơn giản Nên không đặt nặng vấn đề thiết kế sở liệu tối ưu, nên sở liệu tạo đề tài đơn giản hóa, để tăng thời gian nghiêm cứu phần Google Maps API Mơ hình CDM PDM: Hình 2.10 Mơ hình CDM Hình 2.11 Mơ hình CDM Sau sinh sở liệu ta có bảng theloai diadanh Theloai Tên thuộc tính Chức matheloai (khóa chính) Một id để xác định thể loại loại hình du lịch tentheloai Tên thể loại (loại hình) du lịch Diadanh Tên thuộc tính Chức madiadanh (khóa chính) Một id để xác định địa danh danh sách địa danh matheloai (khóa phụ) Khóa phụ địa danh Khóa bảng thể loại Xác định thể loại cho địa danh tendiadanh Tên địa danh diachi Địa thực tế địa danh kinhdo Kinh độ (Longitude) địa danh bảng đồ vido Vĩ độ (Latitude) địa danh bảng đồ 2.2.2 Cấu trúc website Hình 2.12 Cấu trúc website đồ du lịch Website gồm file sở liệu Khi việc tìm kiếm diễn ra, Search.php GetLocationArr.php đồng thời truy suất đến sở liệu để lấy thông tin danh sách địa điểm cần tìm Đối với file Search.php việc tìm kiếm xuất code html để hiển thị lên giao diện website, file GetLocationArr.php việc tìm kiếm tìm thơng tin cần thiết để hổ trợ cho việc tạo đồ tạo marker đánh dấu vị trí 10 đồ, GetLocationArr.php return mảng thông tin vị trí, với website mảng return bao gồm array[tendiadanh,tenloaihinh,kinhdo,vido] Với mảng vừa xuất cần phải pass từ php vào javascript Việc tạo đồ, tạo marker, geolocation,… sử lý GoogleMapsApi.js, hiển thị lên website 2.2.3 Các thành phần website a index.php Nội dung file: Một searchbox để tìm kiếm địa danh > "; echo ""; while($row=mysql_fetch_array($query)){ echo ""; echo "".$row['tendiadanh']; echo ""; echo $row['tentheloai'].""; echo "Chỉ Đường"; echo ""; } echo ""; } ?> } Nội dung file GetLocationArr.php: Cơ Search.php GetLocationArr.php, chung câu query tìm kiếm Search.php sau truy suất echo tag html để hiển thị thông tin cần phải hiển thị button đường, click vào gọi đến hàm chiDuong(lat,lng) javascript 12 GetLocationArr.php sau truy suất phải kiểm tra xem có liệu khơng Nếu có tạo mảng $locate chiều thông tin cần thiết để tạo đồ Sau return $locate, để dùng cho việc tạo marker địa danh tìm c GoogleMapsApi.js Nội dung hàm geolocation(), geolocationError(check), getCurrentLocation() iniMap(): var currentLocation; var kiemtra = 0; function geolocation() { if (navigator.geolocation) { // geolocation có bật hàm getCurrentLocation() gọi khơng bật gọi geolocationError(true) navigator.geolocation.getCurrentPosition(getCurrentLocation,function () { geolocationError(true); }); } else { // trình duyệt không hổ trợ geolocationError(false); } } function geolocationError(check) { // kiểm tra Geolocation có hổ trợ hay bật hay khơng if(check){ alert("Bạn tắt định vị"); initMap(); }else{ alert("Trình duyệt không hổ trợ định vị"); initMap(); } } function getCurrentLocation(position) { // hàm lấy vị trí var currentLat = position.coords.latitude; // currentLat vĩ độ var currentLng = position.coords.longitude; //currentLng kinh độ console.log(currentLat + " " + currentLng); currentLocation = new google.maps.LatLng(currentLat,currentLng); kiemtra = 1; // kiểm tra = có bật vị trí khơng bật vị trí initMap(); } function initMap() { // hàm tạo đồ var mapOptions = { center: {lat: 10.0306873, lng: 105.769501}, // Cần Thơ zoom: 12 }; map = new google.maps.Map(document.getElementById('map'), mapOptions); setMarkers(); } Function geolocation() dùng để kiểm tra trình duyệt web có hổ trợ geolocation hay khơng Nếu có hổ trợ có bật geolocation dùng phương thức geolocation.getCurrentPosition() để lấy vị trí thiết bị Nếu có lỗi, khơng hổ trợ có hổ trợ khơng bật dùng đến hàm geolocationError(check) để 13 thơng báo lỗi cho người dùng Mọi trường hợp geolocation xuất tạo đồ cách gọi initMap(), tạo đồ element có id = "map" Với getCurrentLocation() vĩ độ kinh độ lấy position.coords.latitude position.coords.longitude Hàm initMap() gọi trường hợp để trình duyệt khơng hổ trợ khơng bật định vị hiển thị đồ marker Trong hàm tạo đồ tự động gọi đến hàm setMarkers() Nội dung hàm setMarkers(): var marker; var infoWindow; function setMarkers() { // hàm tạo marker lên đồ var bounds = new google.maps.LatLngBounds(); // bounds để điều chỉnh vị trí để zoom map cho phù hợp var i; if(kiemtra === 1){ var image = { url: '1.png' }; marker = new google.maps.Marker({ title:"Bạn đây!", position: currentLocation, map: map, icon: image }); } for (i=0;i