Ứng dụng công nghệ webgis trong xây dựng website quản lý thông tin các điểm bưu điện của tỉnh thái nguyên

LỜI CẢM ƠN
Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô
của khoa Công nghệ thông tin - Đại học Công nghệ thông tin và truyền thông –
ĐHTN đã tạo điều kiện cho em tham gia hoàn thiện đồ án. Và em cũng xin chân
thành cảm ơn cô Ths. Hồ Thị Tuyến đã nhiệt tình hướng dẫn em hoàn thành tốt
bài đồ án tốt nghiệp.
Trong quá trình làm bài, cũng như là trong quá trình làm bài báo cáo, khó
tránh khỏi sai sót, em rất mong nhận được sự góp ý của các Thầy, Cô trong hội
đồng để em được học thêm được nhiều kinh nghiệm.
Em xin chân thành cảm ơn!
Thái Nguyên, ngày 1 tháng 6 năm 2016
Sinh viên thực hiện

Trần Lan Phương

1


LỜI CAM ĐOAN
Em xin cam đoan: Toàn bộ nội dung đồ án tốt nghiệp“Ứng dụng công
nghệ WebGis trong xây dựng WebSite quản lý thông tin các điểm bưu điện của
tỉnh Thái Nguyên” .Do em tự học tập, tìm hiểu từ quá trình học tập tại trường,
nghiên cứu trên Internet, sách báo, và các tài liệu có liên quan. Không sao chép
hay sử dụng bài làm của bất kỳ ai khác.
Em xin chịu hoàn toàn trách nhiệm về lời cam đoan của mình trước Quý
thầy Cô và nhà trường.
Thái Nguyên, ngày 1 tháng 6 năm 2016
NGƯỜI CAM ĐOAN

Trần Lan Phương

2


MỤC LỤC
LỜI CẢM ƠN

1

LỜI CAM ĐOAN 2
MỤC LỤC

3

DANH MỤC HÌNH ẢNH 5
DANH MỤC BẢNG
LỜI NÓI ĐẦU

7

1

CHƯƠNG 1. TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 2
1.1 Tổng quan về HTML-CSS 2
1.1.1 Giới thiệu về HTML

2

1.1.2 Giới thiệu về CSS

2

1.2 Tổng quan về WebGis

4

1.2.1 Tổng quan về kiến trúc WebGis

4

1.2.2 Tổng quan về Google Map API6
1.3 Tổng quan về UML 17
1.4 Hệ quản trị CSDL MySQL 27
CHƯƠNG 2. KHẢO SÁT PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2.1 Khảo sát hệ thống

33

33

2.1.1 Giới thiệu về hệ thống các điểm bưu điện

33

2.1.2 Hiện trạng việc quản lý các quản lý các điểm bưu điện trên địa bàn tỉnh
Thái Nguyên

34

2.1.3 Bài toán mới đặt ra

34

2.1.4 Yêu cầu của hệ thống

35

2.2 Phân tích hệ thống

35

2.2.1 Sơ đồ USE CASE

35

2.2.2 Sơ đồ trình tự xem thông tin bưu điện 37
2.2.3 Sơ đồ trình tự xem bản đồ điểm bưu điện
3

38


2.2.4 Sơ đồ trình tự tìm kiếm điểm bưu điện 39
2.2.5 Sơ đồ trình tự tìm đường đi trên bản đồ
2.2.6 Sơ đồ trình tự thêm điểm bưu điện

41

2.2.7 Sơ đồ trình tự sửa thông tin điểm bưu điện
2.2.8 Sơ đồ trình tự xóa điểm bưu điện
2.2.9 Sơ đồ trình tự thêm tin mới

44

2.2.10 Sơ đồ trình tự sửa tin tức

45

2.3 Thiết kế hệ thống

40
42

43

46

2.3.1 Biểu đồ lớp tổng quát

46

2.3.2 Biểu đồ hoạt động

47

2.3.3 Ánh xạ sang các bảng dữ liệu 48
2.3.4 Sơ đồ thực thể liên kết 50
CHƯƠNG 3. XÂY DỰNG CHƯƠNG TRÌNH DEMO VỀ HỆ THỐNG
3.1 Giao diện trang Web 51
3.2 Giao diện quản lý

55

KẾT LUẬN 58
TÀI LIỆU THAM KHẢO 59

4

51


DANH MỤC HÌNH ẢNH
Hình 1.1: Kiến trúc hệ thống WebGIS
Hình 1.2: Tạo API key

5

7

Hình 1.3: Tạo Markers trên bản đồ

13

Hình 1.4: Tạo Polyline trên bản đồ

14

Hình 1.5: Tạo Polygon trên bản đồ

15

Hình 1.6: Tạo Infowindows trên bản đồ 16
Hình 1.7: Sơ đồ ca sử dụng mẫu 19
Hình 1.8: Đối tượng lớp mẫu trong một sơ đồ lớp

20

Hình 1.9: Một sơ đồ trình tự mẫu 22
Hình 1.10: Sơ đồ hoạt động24
Hình 1.11: Một sơ đồ thành phần 25
Hình 1.12: Sơ đồ triển khai.

26

Hình 1.13: Hệ quản trị CSDL mysql

27

Hình 2.1: Sơ đồ USER CASE tổng quát 36
Hình 2.2: Sơ đồ USER CASE phân rã chức năng quản lý thông tin điểm bưu điện
36
Hình 2.3: Sơ đồ USER CASE phân rã chức năng quản lý tin tức
Hình 2.4: Sơ đồ trình tự xem thông tin bưu điện 37
Hình 2.5: Sơ đồ trình tự xem bản đồ

38

Hình 2.5: Sơ đồ trình tự tìm kiếm điểm bưu điện39
Hình 2.6: Sơ đồ trình tự tìm đường đi trên bản đồ
Hình 2.7: Sơ đồ trình tự thêm điểm bưu điện

41

Hình 2.8: Sơ đồ trình tự sửa thông tin điểm bưu điện
Hình 2.9: Sơ đồ trình tự xóa điểm bưu điện
Hình 2.10: Sơ đồ trình tự thêm tin mới

44

Hình 2.11: Sơ đồ trình tự sửa tin tức

45
5

40

43

42

37


Hình 2.12: Sơ đồ lớp tổng quát

46

Hình 2.13: Sơ đồ hoạt động tìm kiếm thông tin điểm bưu điện 47
Hình 2.14: Sơ đồ hoạt động tìm đường đi trên bản đồ 47
Hình 2.15: Sơ đồ hoạt động thêm thông tin các điểm bưu điện 48
Hình 2.16: Sơ đồ thực thể liên kết 50

Hình 3.1: Giao diện trang chủ

51

Hình 3.2: Giao diện trang xem bản đồ

52

Hình 3.3: Giao diện trang cập nhật53
Hình 3.4: Giao điện trang liên hệ 54
Hình 3.5: giao diện hiển thị thông tin điểm bưu điện
Hình 3.6: Giao diện hiển thị tin tức

56

Hình 3.7: Giao diện thêm điểm bưu điện 56
Hình 3.8: Giao diện thêm tin tức mới

57

6

55


DANH MỤC BẢNG
Bảng 2.1: Bảng tblhuyen

48

Bảng 2.2: Bảng tbldiembd 49
Bảng 2.3: Bảng baiviet

49

Bảng 2.4: Bảng loaitin

49

Bảng 2.5: Bảng tbl_taikhoan

50

7


LỜI NÓI ĐẦU
Do nhu cầu tìm kiếm thông tin ngày càng cao đặc biệt là nhu cầu tìm kiếm
thông tin theo địa điểm, theo tọa độ không gian, theo khoảng cách hiện nay chưa
đáp ứng nhu cầu của người dùng. Mà hiện nay WebGIS là xu hướng phổ biến
thông tin mạnh mẽ trên Internet không chỉ dưới góc độ thông tin thuộc tính thuần
túy mà nó kết hợp được với thông tin không gian hữu ích cho người sử dụng. Bằng
việc kết hợp GIS và Web để tạo thành WebGIS, người dùng sẽ dễ truy cập được
các thông tin kết hợp với các bản đồ động để có được cái nhìn trực quan thông qua
trình duyệt. Vì vậy em đã chọn đề tài nghiên cứu: “Ứng dụng công nghệ WebGis
trong xây dựng WebSite quản lý thông tin các điểm Bưu Điện của tỉnh Thái
Nguyên”.
 Nội dung nghiên cứu:
Gồm 3 chương:
Chương 1:

Tổng quan về cơ sở lý thuyết
Tổng quan về HTML - CSS
Lý thuyết về WebGis
Tổng quan về UML
Hệ quản trị CSDL MySQL

Chương 2:

Khảo sát phân tích và thiết kế hệ thống
Khảo sát hệ thống
Hiện trạng của hệ thống
Bài toán mới đặt ra và yêu cầu hệ thống
Phân tích hệ thống
Thiết kế hệ thống

Chươg 3:

Xây dựng chương trình
Kết quả giao diện chương trình
8


Kết luận, ý nghĩa

CHƯƠNG 1. TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT
1.1 Tổng quan về HTML-CSS
1.1.1 Giới thiệu về HTML
HTML (Hyper Text Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu
văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với

các mẩu thông tin được trình bày trên World Wide Web. HTML được định nghĩa
như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần
đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ
chức World Wide Web Consortium (W3C) duy trì. HTML đang được phát triển
tiếp với phiên bản hiện tại HTML5 đã mang lại diện mạo mới cho Web. Bằng cách
dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số
lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ
vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG
phức tạp.
1.1.2 Giới thiệu về CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một
dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu
lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví
dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..
Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa
các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS,
người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code
của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn.
Trước khi bắt đầu tìm hiểu thêm về CSS tôi muốn bạn biết một chút về thế
mạnh của nó trong việc thiết kế web. Ví dụ nếu làm việc với HTML và bạn muốn
9


font chữ của toàn bộ trang web là Arial. Bạn sẽ phải làm đi làm lại như thế cho tất
cả các file .html mà bạn có. Nhưng nếu bạn sử dụng CSS, thì bạn chỉ cần làm một
lần và tất cà các trang khác sẽ tự động được thay đổi.
Có ba cách bạn có thể sử dụng để định dạng trang web là: cục bộ, nhúng
vào trang và liên kết đến một file CSS riêng biệt. Trong thực tế thì cách cuối cùng
là liên kết đến một file riêng biệt được sử dụng phổ biến nhất. Nhưng bạn cũng nên
biết về hai cách còn lại vì đôi khi bạn cũng phải sử dụng đến nó tuy không nhiều.

1. Cục bộ – code CSS được chèn trực tiếp vào trong thẻ HTML
Cách định dạng cục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và
chỉ có tác động lên thẻ đó.
Ví dụ:

Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi
cách hiển thị trên trình duyệt

2. Nhúng vào trang web
Cách thứ hai là bạn khai báo code CSS nằm trong cặp thẻ <style></style>
được đặt ở phần <head></head> của tài liệu. Về cơ bản nó cũng chỉ có tác động
cục bộ lên file mà bạn chèn đoạn code CSS này. Nó có phạm vi ảnh hưởng lớn hơn
là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các file
khác trong cùng một trang web.

10


1

<head>

2

<title>Nhúng vào trang</title>

3

<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />

4

<style type=”text/css”>

5

h1 {font-size: 16px;}

6

p {color:blue;}

7

</style>

8

</head>

3. Liên kết đến một file biệt lập
Thực tế cách cuối cùng này mới là thế mạnh thực sự của CSS bởi vì bạn chỉ
cần tạo ra một file CSS và viết code chỉ một lần. Nó sẽ ảnh hưởng đến toàn bộ
trang web chứ không chỉ ảnh hưởng đến một file .html đơn lẻ hoặc chỉ một thẻ
trong hàng ngàn thẻ mà bạn có. Bằng cách này chúng ta có thể tách rời hoàn toàn
những thành phần trình bày và nội dung ra khỏi nhau. Nếu bạn viết toàn bộ code
CSS trong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa
chữa trang web trở nên cực kỳ đơn giản.
Để liên kết file CSS đến tất cả các file .html của bạn, bạn chỉ cần chèn đoạn code
sau vào giữa thẻ <head></head> của tài liệu:

1

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web của
bạn. Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi.
1.2 Tổng quan về WebGis
1.2.1 Tổng quan về kiến trúc WebGis
Kiến trúc web của hệ thống thông tin dữ liệu không gian cũng gần giống
như kiến trúc dành cho một hệ thống thông tin web cơ bản khác, ngoại trừ có sử
dụng kỹ thuật GIS. Có nhiều dạng công nghệ cho việc thành lập web cho thông tin
không gian như: MapServer, GeoServer, ArcGIS Server,… Cơ sở dữ liệu không
gian sẽ được dùng để quản lý và truy xuất dữ liệu không gian, được đặt trên Data
11


Server. Nhà kho hay nơi lưu trữ (Clearing House) được dùng để lưu trữ và duy trì
siêu dữ liệu Metadata về những dữ liệu không gian tại những Data Server khác
nhau. Dựa trên những thành phần quản lý dữ liệu, ứng dụng Server và mô hình
Server được dùng cho ứng dụng hệ thống để tính toán thông tin không gian qua
các hàm cụ thể. Tất cả kết quả tính toán của ứng dụng Server sẽ được gởi đến Web
Server để thêm vào các gói HTML, gởi cho phía client và hiển thị nơi trình duyệt
web.
a) Cilent gửi yêu cầu của người sử dụng thông qua giao thức HTTP đến
Web Server.
b) Web Server nhận yêu cầu của người dùng từ cilent, xử lý và chuyển tiếp
yêu cầu đến ứng dụng trên Server có liên quan.
c) Application Server (chính là các ứng dụng GIS) nhận các yêu cầu cụ thể
đối với các ứng dụng và gọi các hàm có liên quan để tính toán xử lý. Nếu có yêu
cầu dữ liệu nó sẽ gửi yêu cầu dữ liệu đến Data Exchange Center (trung tâm trao

đổi dữ liệu).
d) Data Exchange Center nhận yêu cầu dữ liệu, tìm kiếm vị trí dữ liệu, sau
đó gửi yêu cầu dữ liệu đến Data Server chứa dữ liệu cần tìm.
e) Data Server tiến hành truy vấn dữ liệu cần thiết và trả dữ liệu này về cho
Data Exchange Center.
f) Data Exchange Center nhận nhiều nguồn dữ liệu từ Data Server, sắp xếp
logic dữ liệu theo yêu cầu và trả dữ liệu về cho Application Server.
g) Application Server nhận dữ liệu trả về từ các Data Exchange Center và
đưa chúng đến các hàm cần sử dụng, xử lý, trả kết quả về Web Server.
h) Web Server nhận kết quả xử lý, thêm vào các code HTML, PHP,… để
có thể hiển thị lên trình duyệt, gửi trả kết quả về cho trình duyệt dưới dạng các
trang web.

12


Hình 1.1: Kiến trúc hệ thống WebGIS (Nguồn: Climate GIS –
www.climategis.com)
Kiến trúc 3-tier gồm 3 thành phần cơ bản, đại diện cho 3 tầng:
1) Database (Data tier): là nơi lưu trữ các dữ liệu địa lý bao gồm các dữ liệu
không gian và phi không gian. Các dữ liệu này được quản trị bởi các hệ quản trị cơ
sở dữ liệu như: Oracle, MS SQL Server, Esri SDE, PostgreSQL,… hoặc là các
dạng file dữ liệu như: Shapefile, Tab, XML,… Các dữ liệu này được thiết kế cài
đặt và xây dựng theo 7 từng quy trình cụ thể. Tùy theo quy mô và yêu cầu của hệ
thống mà tổ chức lựa chọn công nghệ quản trị cơ sở dữ liệu cho phù hợp.
2) Application Server (Bussiness tier): thường được tích hợp trong một
Webserver nào đó, ví dụ như các Web Server nổi tiếng Apache Tomcat, Internet
13

Information Server. Đó là một ứng dụng phía Server nhiệm vụ chính của nó là tiếp
nhận các yêu cầu từ client, lấy dữ liệu từ phía cơ sở dữ liệu theo yêu cầu client,
trình bày dữ liệu theo cấu hình định sẵn hoặc theo yêu cầu của client và trả kết quả
về theo yêu cầu.
3) Client (Presentation tier): thông thường đơn thuần là một Browser như
Internet Explorer, FireFox, Google Chome,… để mở các trang web theo URL định
sẵn. Các ứng dụng client có thể là 1 Website, Applet, Flash,… được viết bằng các
công nghệ chuẩn mà W3C đã chứng thực. Các client đôi khi cũng là một ứng dụng
Desktop tương tự như phần mềm MapInfo, ArcMap,…
1.2.2 Tổng quan về Google Map API
a. Google Map API là gì?
Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên
web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google
nổ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ực cũng như khắp
nơi trên thế giới.
Map API là gì?
Đó là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của
site A (gọi là Map API) và nhúng vào website của mình (site B). Site A ở đây là
google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của
google, có thể rê chuột, zoom, đánh dấu trên bản đồ...
Các ứng dụng xây dựng trên map được nhúng vào trang web cá nhân thông
qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng.
Google Map API đã được nâng cấp lên phiên bản thứ 3. Phiên bản này hỗ
trợ không chỉ cho các máy để bàn truyền thống mà cho cả các thiết bị di động.

14


Nhanh hơn và nhiều hơn các ứng dụng.

Điều quan trọng là các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng
dụng nhỏ. Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp.
b. Cách sử dụng và phát triển công nghệ
Tất cả các ứng dụng Maps API nên tải Maps API sử dụng một API key.
Một key API cho bạn kiểm soát các ứng dụng của mình và cũng là việc google có
thể liên lạc với bạn về ứng dụng có ích bạn đang xây dựng. Từ đó có cơ hội phát
triển bản thân mình.
Tạo một API key:
Truy cập vào và đăng nhập bằng tài
khoản gmail của mình.
Click vào Services link bên trái menu.
Kéo xuống dưới tìm Google Maps API v3 service và kích hoạt dịch vụ.
Click API Access, một API key sẽ hiện lên và bạn sẽ copy lại để sử dụng.

15


Hình 0.2: Tạo API key
c. Load bản đồ về trang Web cá nhân
Khi đã có key google cung cấp ta sử dụng key đó trong đoạn mã javascripts
trong thẻ <head>:
<scripttype="text/javascript">

src=" />
key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
Tạo một hàm trong javascripts:
IGFMAP.init=function() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();

var myOptions = {
zoom: 15,
16


center: pcenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
Đầu tiên tạo một đối tượng bản đồ chứa các biến khởi tạo bản đồ
var myOptions = {
zoom: 15,
center: pcenter,
mapTypeId: google.maps.MapTypeId.ROADMAP, };
 center: một điểm làm trung tâm của bản đồ Latitudes(vĩ độ) và Longitudes
(kinh độ). Tương tự như trên khi ta định nghĩa 1 điểm là tọa độ trong Map
ta để nó nằm trong new google.maps.LatLng(lat,lng). Một điểm được xác
định bởi vĩ độ và kinh độ.
 zoom: độ zoom được quy định khi Map được load.
 Map type: loại Map được hiển thị sau khi load xong. có 4 loại để chọn:
ROADMAP, SATELLITE, HYBRID, TERRAIN
 Map object: var map = new google.maps.Map(document.getElementById
("map "), myOptions); Xác định id html chứa đối tượng Map với tùy chọn
"myOptions" như trên.
Sau đó load bản đồ vào web.
<html>
<head>
<title>Simple Map</title>
<style>
html, body, #map-canvas{height: 100%; margin: 0px; padding: 0px}
</style>

17



src=" />
IH80_-AgZbiq1lKAkcOoavIWTEc&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(21.682953,105.815978)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

18


d. Lớp phủ trên bản đồ Overlays
Sau khi load được bản đồ ta thêm các đoạn code xây dựng lớp phủ sau khi

đối tượng map được khởi tạo:
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Sau này cũng vậy các ứng dụng khác nếu muốn được thêm vào thì các đoạn
code được khai báo sau khi đối tượng map được khởi tạo.
Tổng quan: Lớp phủ(overlays) là các đối tượng trên bản đồ và được gắn với
vĩ độ, kinh độ cho nên nó sẽ di chuyển cùng bản đồ khi ta kéo hoặc zoom bản đồ.
Overlays phản ánh các đối tượng mà bạn thêm vào bản đồ như points, line, areas,
hoặc các "collections of object" tạm gọi là bộ sưu tập đối tượng, các đối tượng mà
bạn muốn xây dựng. Vd: 1 khu vực công nghiệp, khu vực sông, khu vui chơi giải
trí...
Các loại lớp phủ: markers, polylines, areas, info windows, polygons.
Thêm các lớp phủ: Đầu tiên phải xác định lớp phủ nào cần xây dựng để có
thể hiển thị trên Map. Thêm lớp phủ trực tiếp lên bản đồ sử dụng phương thức
setmap(). Ví dụ sau thêm lớp phủ Markers để đánh dấu điểm trên map.
var myLatlng = new google.maps.LatLng(21.682953,105.815978);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
19


myOptions);
//Lớp phủ Markers được thêm vào bởi đối tượng trong javascripts cùng các
tùy chọn của lớp phủ:
var marker = new google.maps.Marker({
position: myLatlng, //vị trí này sẽ xuất hiện điểm đánh dấu với icon mặc

định của google.
title:"Hello World!"
});
//sau đó gọi phương thức setmap() để thêm vào bản đồ
"marker.setMap(map)"
marker.setMap(map);// đối tượng map được khởi tạo ở trên
Loại bỏ lớp phủ: Để loại bỏ ta gọi phương thức setmap() của lớp phủ và đặt
là null "setmap(null)". Nhưng đây mới chỉ loại bỏ tạm thời không cho chúng xuất
hiện chứ chưa xóa hoàn toàn.
Nhưng trên bản đồ với một ứng dụng nhỏ thì ít nhất ta cũng phải sử dụng trên 2
lớp phủ. Vì vậy để quản lý chúng thật sự dễ dàng ta tạo một mảng chứa các lớp
phủ. Khi muốn tạo một lớp phủ ta chỉ setmap() trên các phần tử của mảng hoặc
loại bỏ chúng cũng vậy. Điều quan trọng là có thể xóa các lớp phủ khi cho độ dài
của mảng bằng 0.
e. Markers
Markers dùng để xác định một điểm trên bản đồ hoặc đánh dấu địa điểm
dựa trên vĩ độ và kinh độ. Theo mặc định sử dụng icon của google làm hình ảnh
hiện lên điểm đánh dấu. Hoặc muốn một icon của mình thì ta gọi phương thức
setIcon().
Sau đây là các trường được xây dựng trong new google.maps.Marker:

20


Position(bắt buộc): Quy định là tọa độ LatLng của điểm được đánh dấu.
Map(tùy chọn): Quy định đối tượng bản đồ được đánh dấu. Nếu thuộc tính này
được khai báo trong đây nó sẽ thay thế cho Markers.setMap(map).
Icon(tùy chọn): Hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh
mặc định. Dùng tùy chọn này thay thế cho marker.setIcon(link đến hình ảnh trong
thư mục).

Title(tùy chọn): Tiêu đề của địa điểm.
Draggable(tùy chọn): Thuộc tính động của điểm đánh dấu, thể hiện sự chuyển
động của điểm được đánh dấu. Nếu TRUE tính động được khởi động.
Animation: Cách thức chuyển động của điểm đánh dấu. Có 2 cách thức DROP,
BOUNCE.
 var myLatlng = new google.maps.LatLng(21.682953,105.815978);


var myOptions = {



zoom: 4,



center: myLatlng,



mapTypeId: google.maps.MapTypeId.ROADMAP



}



var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);



var icon = "link đến hình ảnh";



var marker = new google.maps.Marker({



position: myLatlng,



map: map,



icon:icon,
21




title:"Hello World!",



draggable:true,



animation:google.maps.Animation.DROP



});

Hình 1.3: Tạo Markers trên bản đồ
f. Polylines
Polylines dùng để thể hiện đường kết nối trên bản đồ dựa vào các tọa độ.
Các đoạn thẳng được hiển thị với các tùy chọn cho nó như màu sắc, độ đậm nhạt,
độ rộng của đường. Phải có ít nhất 2 điểm để tạo nên 1 đường thẳng.
Cũng giống như lớp phủ Markers ta khai báo lớp phủ Polyline và các thuộc tính
của nó như sau:
//vẽ đường
22


var poly=new google.maps.Polyline({
path: //giá trị là một mảng chứa các tọa độ cần nối với nhau
strokeColor: "#FF0000",// tùy chọn màu sắc
strokeOpacity: 1.0,//độ đậm nhạt của màu sắc
strokeWeight: 2//độ rộng của đường
});
//phủ lên map
poly.setMap(map);

Hình 1.4: Tạo Polyline trên bản đồ

g. Polygon

23


Polygon là các đường polyline khép kín dùng để thể hiện đường kết nối trên
bản đồ dựa vào các tọa độ. Các đoạn thẳng được hiển thị với các tùy chọn cho nó
như màu sắc, độ đậm nhạt, độ rộng của đường. Phải có ít nhất 2 điểm để tạo nên 1
đường thẳng.
Cũng giống như Polyline ta khai báo lớp phủ Polygon và các thuộc tính của nó
như sau:
//vẽ đường
PolygonOptions pgOption=new PolygonOptions(); ({
path: //giá trị là một mảng chứa các tọa độ cần nối với nhau
polyGon.setStrokeColor(Color.BLUE); // tùy chọn màu sắc
polyGon.setFillColor(Color.YELLOW); //độ đậm nhạt của màu sắc
polyGon.setStrokeWidth(5); //độ rộng của đường
});
//phủ lên map
poly.setMap(map);

24


Hình 1.5: Tạo Polygon trên bản đồ
h. Infowindown
Infowindows là một cửa sổ chứa các thông tin. Ta có thể gắn nó vào
MARKER hay POLYGON để khi click vào thì cửa sổ Infowindows mở lên cho ta

25