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.
Trang 1TRƯỜ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
Trang 2Mục lục
CHƯƠNG I: TỔNG QUAN
1.1 ĐẶT VẤN ĐỀ
Đồ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
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 cách hoạt động và xây dựng được một bản đồ 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 quyết
Trang 3- Nghiên cứu và hiểu rõ các khái niệm liên quan đến Google Maps API và Google Maps JavaScript API
- Từ nguồn tài liệu có sẵn và thông tin từ nguồn internet, thực hiện một website đơn giản đề hiểu rõ cách hoạt động của Google Maps JavaScript API
1.3.2 Kế hoạch thực hiện
Tuần 5,6 Tìm hiểu Google Maps API và các thành phần của nó Tìmhiểu cách sử dụng và chức năng của các thành phần đó. Tuần 7,8,9 Nghiên cứu và xây dựng một website hoàn chỉnh
Tuần 11,12 Viết bài báo cáo
Trang 4CHƯƠNG 2: NỘI DUNG NGHIÊN CỨU
2.1 CÔNG NGHỆ GOOGLE MAPS API
2.1.1 Tổng quan về Google Maps API
Maps API là một phương thức cho phép một website (site A) sử dụng dịch vụ bản
đồ của Google Maps và nhúng vào website của mình (site A), site A là các website cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google (di chuột, zoom, marker, directions…)
Với đề tài này áp dụng Maps API thông qua ngôn ngữ javascript nên dễ dàng xây dựng một website cơ bản Với Google Maps JavaScript API v3 đã được thiết kế để load nhanh hơn và thích hợp với các thiết bị di động với các thao tác đa điểm
2.1.2 Xây dựng một bản đồ đơn giản
a Google Maps JavaScript API Key
Trước khi tạo một website có sử dụng được Maps Api cần phải có một key từ Google API Console
Vào www console.developers.google.com đăng nhập vào, chọn một bộ api mà bạn cần sử dụng Sau đó tạo project để google hiển thị key Mỗi tài khoản sẽ có một key riêng và key là duy nhất
Trang 5Hình 2.1: Lấy API Key
Tiếp theo load bản đồ về website bằng cách đặt code javascript vào website Với YOUR_API_KEY là key vừa tạo Với “callback=initMap” là gọi hàm initMap (hàm tạo bản đồ)
Hình 2.2: Code gọi đến gói api của google maps
b Hàm tạo bản đồ
Có thể gọi hàm tạo bản đồ thực hiện bằng cách lắng nghe sự kiện onload hoặc thông qua script đặt api key
Hình 2.3 Hàm thực hiện tạo và hiển thị bản đồ
Đối tượng map = google.maps.Map dùng để tạo bản đồ Có dạng
Map(mapDiv,MapOptions) mapDiv là id vị trí cần đặt map trong thân của html
MapOptions là những thuộc tính cần thiết để tạo bản đồ
Các thuộc tính của hàm initMap():
- center: là tâm bản đồ Với lat, lng là kinh độ và vĩ độ của tâm đó
- zoom độ zoom của bản đồ
Ngoài ra còn có các thuộc tính khác như mapTypeId, draggable, backgroundColor, zoomControl,…
c Google Maps Event
Gồm 2 loại sự kiện là UI Event và MVC State change UI Event dùng để lắng nghe sự kiện từ người dùng MVC State change dùng để lắng nghe sự kiện từ sự thay đổi giá trị của các thuộc tính trên bản đồ
Trang 6UI Event: một số đối tượng trong maps được thiết kế để đáp ứng với các sự kiện
từ người dùng như các sự kiện từ chuột hoặc bàn phím Ví dụ đối tượng google.maps.Marker có thể lắng nghe các sự kiện như: 'click', 'dbclick', 'drag', 'mouseover',…
Hình 2.4 Marker đáp ứng với sự kiện click để thực hiện set độ zoom bằng 8
MVC State change gồm các sự kiện:
- zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên map
- center_changed: sự kiện sẽ thực thi khi thuộc tính center của map thay đổi
- title_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổi
- heading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổi
- dragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồ
- drag: sự kiện sẽ thực thi khi người dùng drag bản đồ
- dragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồ
- maptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi
Hình 2.5 map lắng nghe sự kiện thay đổi vị trí của center
Để đăng kí một sự kiện dùng addListener() Phương thức này lấy một sự kiện
để lắng nghe và một hàm sẽ được gọi khi sự kiện xuất hiện Ngoài ra Maps JavaScript API có cung cấp phương thức addDomListener() để có thể lắng nghe sự kiện từ DOM
Trang 7Hình 2.6 Thực hiện gọi hàm initMap() với sự kiện 'load' với DOM element là
window
d Marker và Info Windows
Marker dùng để xác định một vị trí trên bản đồ hoặc đánh dấu dựa trên tọa độ (kinh độ và vĩ độ)
Hình 2.7 Một marker tại vị trí trường Đại học Cần Thơ
Khi thêm một marker cần phải khai báo các trường càn thiết để xây dựng một marker Trường quan trọng nhất và bắt buộc phải có là position, được quy định là tọa
độ của điểm được đánh dấu
Ngoài ra còn có các trường:
- map: quy định đối tượng bản đồ nào đc đánh dấu
- animation: cách thức chuyển động của marker (drag và bounce)
- draggable: true hoặc false quy định sự chuyển động được hay không của marker
Trang 8- title: tiêu đề của địa điểm.
- icon: hình ảnh tùy chọn để hiển thị thay thế hình ảnh mặc định
Hình 2.8 Tạo marker có vị trí tại trung tâm thành phố Cần Thơ
Sau khi thiết lặp xong các thông tin về marker thì marker.setMap(map) để hiển thị lên bản đồ (map)
Đối tượng Info Window dùng để hiển thị một cửa sổ thông tin nằm trên bản đồ Google Map, nó thường được dùng để hiển thị thông tin của Marker Tuy nhiên cũng có thể hiển thị tạo một vị trí nào đó trong bản đồ InfoWindow được khởi tạo bởi các thông
số gồm:
- content: nội dung muốn hiển thị
- pixelOffset: Vị trí các đỉnh của cửa sổ được neo, thông số này thường để mặc định
- position: đối tượng LatLng gồm hai thông số tung độ và vỹ độ
- maxWidth: Chiều rộng tối đa của cửa sổ và tính theo pixel Khi không thiết đặt thì info window sẽ tự vừa với nội dung cần hiển thị
Hình 2.9 Tạo một marker kèm với một 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ở dữ liệu
Trang 9Mục tiêu cần đạt được là tìm hiểu về Google Maps API và xây dựng một website bản đồ đơn giản Nên không đặt nặng vấn đề thiết kế một cơ sở dữ liệu quá tối ưu, nên cơ
sở dữ liệu được tạo trong đề tài này sẽ được đơn giản hóa, để tăng thời gian nghiêm cứu
về phần Google Maps API
Mô hình CDM và PDM:
Hình 2.10 Mô hình CDM Hình 2.11 Mô hình CDM Sau khi sinh ra cơ sở dữ liệu ta có 2 bảng theloai và diadanh
Theloai
matheloai (khóa chính) Một id để xác định một thể loại trong các loại hình du lịch
tentheloai Tên thể loại (loại hình) du lịch
Trang 10madiadanh (khóa chính) Một id để xác định một địa danh trong danh sách các địa danh
matheloai (khóa phụ) Khóa phụ của bản địa danh Khóa chính của bảng thể loại Xác
định thể loại cho địa danh
tendiadanh Tên của địa danh
diachi Địa chỉ thực tế của địa danh
kinhdo Kinh độ (Longitude) của địa danh trên bảng đồ
vido Vĩ độ (Latitude) của địa danh trên bảng đồ
2.2.2 Cấu trúc website.
Hình 2.12 Cấu trúc website bản đồ du lịch Website gồm 4 file và một cơ sở dữ liệu Khi việc tìm kiếm diễn ra, Search.php và GetLocationArr.php đồng thời truy suất đến cơ sở dữ liệu để lấy thông tin về danh sách các địa điểm cần tìm Đối với file Search.php việc tìm kiếm sẽ xuất ra code html để hiển thị lên giao diện website, còn file GetLocationArr.php việc tìm kiếm sẽ tìm những thông tin cần thiết để hổ trợ cho việc tạo bản đồ và tạo các marker đánh dấu các vị trí trên bản
Trang 11đồ, GetLocationArr.php sẽ return một mảng các thông tin vị trí, với website này mảng return ra bao gồm array[tendiadanh,tenloaihinh,kinhdo,vido] Với mảng vừa xuất ra cần phải pass từ php vào javascript Việc tạo bản đồ, tạo marker, geolocation,… được sử lý bởi GoogleMapsApi.js, sao đó được hiển thị lên website
2.2.3 Các thành phần trong website.
a index.php
Nội dung file:
<body onload="geolocation()">
<div class="left">
<div class="search-bar-div">
<! Một searchbox để tìm kiếm địa danh >
<form method="post">
<input id='textbox' type="text" class="search-bar" name="search" "/>
<button class="close-icon" type="reset"></ button>
</form>
</div>
<div id="search-view">
<! khu vực hiển thị các địa danh đã tìm >
<?php
require_once ("Search.php");
$array = array();
$array = require_once("GetLocationArr.php"); // lấy mảng các các thông tin
cần thiết để tạo bản đồ array[tendiadanh,tenloaihinh,kinhdo,vido]
?>
</div>
</div>
<div class="right" id="map"></ div> <! Khu vực hiển thị bản đồ >
<script>
var locateArr = <?php echo $array?>;
</script>
<script type="text/javascript" src="script/googleMapsApi.js"></ script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyD6fh6x6OBg1oIMKO0UCw-Xr8F3ZmUj3OE&language=vi">
</script>
</body>
Index.php bao gồm hai div chính left và right Div left dùng để hiển thị thông tin tìm kiếm, div right dùng để hiện thị bản đồ có id = "map" Với div có id = "search-view"
có một đoạn code php require Search.php để hiển thị nội dung tìm kiếm và require GetLocationArr.php để return một mảng gồm các thông tin của địa danh tìm kiếm Để pass nội dung mảng từ php vào javascript ta cần một code với nội dung là var locateArr
= <?php echo $array?>.
b Search.php và GetLocationArr.php
Trang 12Nội dung file Search.php:
<?php
require_once("connection.php");
if(empty( $_POST ['search'])){
}else{
if(isset( $_POST ['search'])){
$query = mysql_query("SELECT * FROM diadanh,theloai
WHERE diadanh.matheloai=theloai.matheloai and
diadanh.tendiadanh
LIKE '%".$_POST ['search']."%'");
echo "<form>";
echo "<table class='tb-view'>";
while( $row=mysql_fetch_array($query )){
echo "<tr>";
echo "<td>".$row ['tendiadanh'];
echo "<br>";
echo $row ['tentheloai']."</td>";
echo "<td><button id='button' type='button' onclick='chiDuong(";
echo $row ['vido']."," $row ['kinhdo'];
echo ")'>Chỉ Đường</button></td>";
echo "</tr>";
}
echo "</table>";
}
}
?>
Nội dung file GetLocationArr.php:
<?php
require_once("connection.php");
if(empty( $_POST ['search'])){
}else {
if (isset( $_POST ['search'])) {
$query = mysql_query("SELECT * FROM diadanh,theloai
WHERE diadanh.matheloai=theloai.matheloai and
diadanh.tendiadanh
LIKE '%" $_POST ['search']."%'");
if (mysql_num_rows($query ) > 0) {
$locate = array();
$i = 0;
while ( $row = mysql_fetch_array($query )) {
$locate [] = array( $row ['tendiadanh'], $row ['tentheloai'], $row ['vido'],
$row ['kinhdo']);
}
return $locate ;
}
}
}
?>
Cơ bản Search.php và GetLocationArr.php, đều chung một câu query tìm kiếm Search.php sau khi truy suất sẽ echo các tag html để hiển thị thông tin và cần phải hiển thị một button chỉ đường, khi click vào sẽ gọi đến hàm chiDuong(lat,lng) trong
javascript
Trang 13GetLocationArr.php thì sau khi truy suất phải kiểm tra xem có dữ liệu không Nếu
có tạo một mảng $locate 2 chiều các thông tin cần thiết để tạo bản đồ Sau đó return
$locate, để dùng cho việc tạo marker các địa danh đã tìm
c GoogleMapsApi.js
Nội dung các hàm geolocation(), geolocationError(check), getCurrentLocation()
và iniMap():
var currentLocation;
var kiemtra = 0;
function geolocation() {
if (navigator.geolocation) {
// nếu geolocation có bật thì hàm getCurrentLocation() được gọi còn không bật thì
sẽ 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 được 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í hiện tại
var currentLat = position.coords.latitude; // currentLat vĩ độ hiện tại
var currentLng = position.coords.longitude; //currentLng kinh độ hiện tại.
console log ( currentLat + " " + currentLng );
currentLocation = new google.maps.LatLng( currentLat , currentLng );
kiemtra = 1; // kiểm tra = 1 là có bật vị trí 0 là không bật vị trí.
initMap();
}
function initMap() {
// hàm tạo bản đồ
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ợ và có bật geolocation thì sẽ dùng phương thức
geolocation.getCurrentPosition() để lấy vị trí hiện tại của thiết bị Nếu có lỗi, không hổ trợ hoặc có hổ trợ nhưng không bật thì sẽ dùng đến hàm geolocationError(check) để