Tải bản đầy đủ (.doc) (69 trang)

xây dựng hệ thống tra cứu thông tin bất động sản trên bản đồ google map

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.14 MB, 69 trang )

MỤC LỤC
Danh mục hình vẽ.............................................................................................3
Danh mục ký hiệu, từ viết tắt...........................................................................5
MỞ ĐẦU..........................................................................................................6
Chương 1. TỔNG QUAN.................................................................................8
1.1 Giới thiệu về bản đồ trực tuyến...................................................................................................8
1.1.1 Bản đồ và bản đồ trực tuyến.................................................................................................8
1.1.2 Công nghệ Mashup (web application hybrid).......................................................................9
1.2 Giới thiệu bài toán......................................................................................................................10

Chương 2. GOOGLE MAP API......................................................................12
2.1 Giới thiệu Google Map...............................................................................................................12
2.2 Các thành phần chính trên bản đồ Google Map.......................................................................13
2.3 Nạp và hiển thị bản đồ...............................................................................................................13
2.4 Nạp và hiển thị bản đồ...............................................................................................................15
2.5 Các đối tượng Overlays.............................................................................................................17
2.5.1 Marker..................................................................................................................................18
2.5.2 Polylines...............................................................................................................................20
2.5.3 Polygon................................................................................................................................22
2.5.4 Circle....................................................................................................................................24
2.5.5 InfoWindow..........................................................................................................................26
2.5.6 Cluster..................................................................................................................................27
2.6 Các sự kiện................................................................................................................................28
2.7 Google Service...........................................................................................................................31
2.8 Geocoding..................................................................................................................................33
2.9 Ưu nhược điểm của Google Map API.......................................................................................36
2.9.1 Ưu điểm...............................................................................................................................36
2.9.2 Nhược điểm.........................................................................................................................36

Chương 3. HỆ THỐNG TRA CỨU THÔNG TIN BẤT ĐỘNG SẢN TRÊN
BẢN ĐỒ GOOGLE MAP...............................................................................37


3.1 Phát biểu bài toán......................................................................................................................37
3.2 Đặc tả yêu cầu hệ thống............................................................................................................37
3.2.1 Yêu cầu chức năng.............................................................................................................37
3.2.2 Yêu cầu phi chức năng.......................................................................................................39
3.3 Kiến trúc trúc tổng quát..............................................................................................................40

1


3.4 Giải pháp công nghệ..................................................................................................................41
3.5 Hệ thống con LandNews............................................................................................................42
3.5.1 Biểu đồ ca sử dụng.............................................................................................................42
3.5.2 Kiến trúc tổng quát..............................................................................................................48
3.5.3 Biểu đồ lớp...........................................................................................................................49
3.5.4 Biểu đồ trình tự....................................................................................................................50
3.6 Hệ thống con Data Importer.......................................................................................................61
3.6.1 Kiến trúc hệ thống...............................................................................................................61
3.6.2 Biểu đồ trình tự....................................................................................................................62
3.7 Kết quả thực nghiệm..................................................................................................................63
3.7.1 Chức năng tìm kiếm cơ bản................................................................................................63
3.7.2 Chức năng tìm kiếm theo khoảng cách..............................................................................64
3.7.3 Chức năng tìm kiếm theo độ dài đường.............................................................................65
3.7.4 Chức năng tìm kiếm toàn văn.............................................................................................66
3.7.5 Chức năng đăng tin.............................................................................................................67

Chương 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.....................................68
TÀI LIỆU THAM KHẢO..............................................................................69

2



Danh mục hình vẽ

Hình 1.1: Mô hình hoạt động...........................................................................11
Hình 2.1: Bản gồ Google Map........................................................................12
Hình 2.2: Các thành phần chính trên bản đồ Google Map..............................13
Hình 2.3: Hiển thị các Marker trên bản đồ......................................................20
Hình 2.4: Hiển thị các Polylines trên bản đồ...................................................22
Hình 2.5: Hiển thị các Polygon trên bản đồ....................................................24
Hình 2.6: Hiển thị các Circle trên bản đồ........................................................26
Hình Hình 2.7: Minh họa cửa sổ InfoWindow................................................27
Hình 3: Minh họa Cluster................................................................................28
Hình 2.8: Minh họa dịch vụ Geocoding..........................................................35
Hình 3.1: Kiến trúc hệ thống...........................................................................40
Hình 3.2: Các use case của hệ thống...............................................................42
Hình 3.3: Kiến trúc hệ thống LandNews.........................................................48
Hình 3.4: Biểu đồ lớp......................................................................................49
Hình 3.5: Biểu đồ tương tác trang chủ............................................................51
Hình 4: Tìm kiếm cơ bản.................................................................................52
Hình 3.7: Tim kiếm theo khoảng cách.............................................................53
Hình 5: Tìm kiếm theo khoảng cách đường đi................................................54
Hình 6: Tìm kiếm toàn văn..............................................................................55
Hình 7: Đăng tin..............................................................................................56
Hình 3.11: Đăng nhập......................................................................................57
Hình 3.12: Đăng xuất......................................................................................58
Hình 3.13: Thay đổi mật khẩu.........................................................................59
Hình 3.14: Đăng ký thành viên.......................................................................60
Hình 3.15: Kiến trúc hệ thống Data Importer..................................................61
Hình 3.16: Import dữ liệu gắn nhãn vào cơ sở dữ liệu....................................62
3



Hình 3.17: Minh họa chức năng tìm kiếm cơ bản...........................................63
Hình 3.18: Minh họa tìm kiếm theo khoảng cách...........................................64
Hình 3.19: Minh họa tìm kiếm theo độ dài đường..........................................65
Hình 3.20: Minh họa tìm kiếm toàn văn..........................................................66
Hình 3.21: Minh họa chức năng đăng tin........................................................67

4


Danh mục ký hiệu, từ viết tắt
Từ viết tắt

Thuật ngữ

API

Application Programming Interface

ORM

Object-Relational Mapping

MVC

Model View Controller

UoW


Unit of Work

N/A

Not Applicable

XML

Extensible Markup Language

5


MỞ ĐẦU
Từ xa xưa tới nay bản đồ luôn đóng vai trò quan trọng quan trọng trong đời
sống xã hội và luôn được mọi người quan tâm. Nhắc tới bản đồ, người ta
thường nghĩ tới các nhà thám hiểm địa lý, khảo cổ học hay các nhà quân sự.
Nhưng không hẳn như vậy, nó được sử dụng cho nhiều đối tượng khác nhau
như các nghiên cứu khoa học, các thương nhân, cá nhân... Mỗi người dùng
đều có mục đích riêng của mình. Ngày nay, bản đồ được sử dụng rất phổ biến
cho mục đích cá nhân như dẫn đường, tìm kiếm địa điểm…
Ngày nay với sự bùng nổ của Internet và điện thoại thông minh, đã có rất
nhiều dịch vụ bản đồ trực tuyến ra đời như Google Map của google, Bing
Map của Microsoft, Here của Nokia.., thậm chí các phần mềm bản đồ còn
được tích hợp sẵn như một phần mềm mặc định trong điện thoại. Theo các
thống kê cho thấy phần mềm bản đồ trên điện thoại có tần suất sử dụng nhiều
nhất, chỉ đứng sau các ứng dụng cơ bản của điện thoại là nhắn tin và gọi điện.
Trong số các phần mềm bản đồ trực tuyến thì Goolge Map được sử dụng khá
phổ biến, Google Map cung cấp cho chúng ta toàn bộ bản đồ của thế giới,
trong đó có Việt Nam. Các API của Google Map được đánh giá là khá đầy đủ

và dễ sử dụng. Hiện nay Google Map đã phát triển lên phiên bản 3, hay còn
gọi là “Google Map API V3”.
Google Map cung cấp cho người dùng các dịch vụ cơ bản như tìm kiếm địa
điểm, dẫn đường, tìm kiếm ATM, nhà hàng… Nhưng không chỉ có vậy,
Google Map còn cung cấp API cho các nhà phát triển ứng dụng để cho phép
các xây dựng các ứng dụng dựa trên bản đồ Google Map, theo đó các nhà
phát triển ứng dụng có thể sử dụng các dịch vụ được cung cấp bởi Google
Map, kết hợp với dữ liệu của ứng dụng để hiển thị lên bản đồ.
Các bản tin bất động sản thường bao gồm thông tin về địa điểm, vì thế sẽ rất
hữu ích nếu sử dụng Google Map để hiển thị trực quan các bản tin bất động
sản, hơn nữa có thể sử dụng được các dịch vụ được cung cấp bởi Google Map
như tính khoảng cách, tìm đường.
Luận văn tập trung xây dựng hệ thống cho phép hiển thị trực quan các bản tin
bất động sản trên bản đồ Google Map, ngoài khía cạnh hiểu thị trực quan vị
trí của bản tin bất động sản trên bản đồ Google Map thì hệ thống còn tận dụng
các tính năng đặc thù trên bản đồ như dẫn đường, tìm kiếm theo khoảng cách
6


đường.. Ngoài ra, luận văn cũng được xây dựng để tích hợp với hệ thống thu
thập và trích rút thông tin tự động từ bản tin bất động sản của nhóm tác giả
Phạm Vi Liên, Phạm Bảo Sơn.
Bố cục của luận văn như sau:
Chương 1, luận văn giới thiệu về bài toán. Chương này giới thiệu những khái
niệm cơ bản về bản đồ, bản đồ trực tuyến, công nghệ mashup và bài toán mà
đề tài sẽ thực hiện.
Chương 2, luận văn giới thiệu về bản đồ Google Map. Chương này đi sâu vào
tìm hiểu Google Map API là cơ sở lý thuyết phục vụ cho việc cài đặt bài toán
thực tế. Ngoài ra, chương cũng nêu đánh giá ưu, nhược điểm khi sử dụng
Google Map API.

Chương 3, luận văn phân tích, thiết kế và cài đặt bài toán. Chương này đi sau
vào phân tích, thiết kế và cài đặt hệ thống. Chúng tôi sử dụng UML là ngôn
ngữ chính để biểu diễn thiết kế bài toán.
Chương 4, kết luận và hướng phát triển. Chương này chúng tôi đưa ra các kết
luận và hướng phát triển tiếp theo của đề tài.

7


Chương 1. TỔNG QUAN
1.1

Giới thiệu về bản đồ trực tuyến

1.1.1
Bản đồ và bản đồ trực tuyến
Theo Wikipedia, bản đồ là bản vẽ đơn giản miêu tả một không gian, địa điểm
và hiển thị những thông số liên quan trực tiếp đến vị trí. Theo các nhà bản đồ,
bản đồ là sự miêu tả khái quát, thu nhỏ bề mặt trái đất hoặc bề mặt thiên thể
khác trên mặt phẳng trong một phép chiếu xác định, nội dung của bản đồ
được biểu thị bằng hệ thống ký hiệu quy ước. Bản đồ thường dùng nhất trong
địa lý, theo nghĩa này bản đồ thường có hai chiều mà vẫn biểu diễn một
không gian có ba chiều đúng đắn.
Bản đồ trực tuyến thường được biết đến với thuật ngữ web map nhằm nói đến
dịch vụ bản đồ dựa trên web, nói cách khác thay vì bản đồ được thể hiện theo
dạng in trên giấy như truyền thống thì web map thể hiện bản đồ trên nền web.
Ngày nay, các dịch vụ bản đồ trực tuyến được sử dụng rỗng rãi bởi các ưu
điểm:
- Tìm kiếm thông tin trên bản đồ được thực hiện dễ dàng, nhanh chóng
- Sử dụng thuận tiện, có thể sử dụng dịch vụ bản đồ từ bất cứ đâu có

internet và thiết bị truy cập web như máy tính hay điện thoại.
- Dữ liệu được cập nhật liên tục, thường xuyên hơn so với bản đồ giấy
- Không cần in ra giấy
- Có nhiều dịch vụ mà bản đồ giấy không có như dẫn đường, đo khoảng
cách
- Có nhiều dạng thể hiện phong phú, như hiển thị ảnh vệ tinh, hiển thị
bản đồ đường đi..
Bản đồ trực tuyến mang lại nhiều ưu điểm, song nó cũng có những nhược
điểm như:
- Dữ liệu bản đồ thường ít tin cậy hơn so với bản đồ giấy
- Vùng hiển thị hạn chế, do kích thước màn hình thường nhỏ hơn nhiều
so với bản đồ giấy
- Chi phí xây dựng và triển khai dịch vụ bản đồ thường đắt hơn so với
bản đồ giấy

8


1.1.2
Công nghệ Mashup (web application hybrid)
Theo từ điển trực tuyến Wikipedia, Mashup là trang web (web page) hay ứng
dụng web (web application) sử dụng thông tin được lấy từ nhiều nguồn khác
nhau để tạo lên một dịch vụ mới được hiển thị trên một giao diện mới duy
nhất. Mashup cho phép mọi người thể hiện khả năng sáng tạo bất tận bằng
cách "nối" hai hay nhiều ứng dụng web lại với nhau. Thuật ngữ này được nói
đến đã lâu nhưng nay mới được giới công nghệ chú trọng hơn.
Mashup được phân làm bốn loại tiêu biểu:
- Consumer mashup: Trích xuất dữ liệu khác nhau từ nhiều nguồn và
được tập hợp lại dưới một giao diện đồ họa đơn giản.
- Data mashup: Trộn dữ liệu cùng loại từ nhiều nguồn, chẳng hạn gộp dữ

liệu từ các RSS feed vào một feed đơn nhất.
- Business mashup: Sử dụng cả hai loại mashup trên, thường là tích hợp
data ở cả trong và ngoài công ty. Ví dụ, công ty bất động sản A có thể
phân tích thị phần khi so sánh số căn nhà họ bán được tuần qua với
danh sách tổng các ngôi nhà được bán trên thị trường.
- Telecom mashup là ứng dụng viễn thông tổng hợp, chẳng hạn kết hợp
dịch vụ tin nhắn từ công ty A, nhạc chuông của công ty B, thư thoại
(voicemail) của công ty C...
Ngày nay, mashup được sử dụng rất phổ biến, chẳng hạn, một nhà lập trình có
thể tạo website chia sẻ ảnh và video của riêng mình khi kết hợp hai dịch vụ
YouTube và Flickr. Hay người sử dụng có thể "trộn" dữ liệu về tình trạng giao
thông ở Hà Nội với Google Maps để lập bản đồ các điểm thường xuyên tắc
đường trong thành phố...
Trên thực tế, chúng ta thường gặp bốn nội dung chính của Mashup:
- Bản đồ: Chẳng hạn người dùng lập bản đồ về bất động sản, cửa hàng
quà tặng, trường học... tại một địa phương qua Google Maps.
- Video, Image: Ví dụ như dùng giao diện lập trình ứng dụng API của
Flickr để tạo mashup chia sẻ ảnh trên những site khác.
- Tìm kiếm - mua sắm: Là việc tích hợp search engine để tra cứu thông
tin về du lịch, nhà hàng...

9


- Tin tức: Tiêu biểu nhất là Digg.com - dịch vụ hỗ trợ người sử dụng tập
hợp tin tức về công nghệ, văn hóa... từ hàng loạt website khác nhau.
Tuy nhiên, vì các mashup dễ tạo hơn so với nhiều ứng dụng truyền thống nên
chúng có thể không được kiểm soát kỹ lưỡng về mặt bảo mật. Nhiều ứng
dụng loại này dựa trên JavaScript vốn có nhiều kẽ hở. Việc cài đặt thoải mái
các thành phần mashup bên ngoài là mối hiểm họa vì ta không biết rõ bên

trong nó thực hiện những tác vụ gì. Mặc dù hấp dẫn với những ứng dụng phát
triển nhanh và gọn nhẹ, nhưng mashup cũng có những hạn chế. Theo Stefan
Andreasen - giám đốc kỹ thuật của Kapow Technologies, "các mashup có ý
nghĩa cho 80% qui trình CNTT thông thường. Nhưng không công ty nào sử
dụng mô hình như mashup cho thông tin quan trọng".
1.2

Giới thiệu bài toán

Hầu hết các trang tin về bất động sản đăng tin dạng văn bản, vì thế người xem
tin cần đọc và phân tích các thông tin để có các thông tin cần thiết. Một trong
các thông tin được người đọc quan tâm nhất đó là thông tin về địa điểm. Tuy
nhiên, bản tin dạng văn bản này không cho ta một cái nhìn trực quan về địa
điểm, hơn nữa việc tìm kiếm theo khoảng cách đến một điểm nào đó, hay chỉ
đường đi từ một điểm đến một điểm khác là không thể thực hiện được.
Việc hiển thị bản tin bất động sản trên bản đồ sẽ cho người dùng một cái nhìn
trực quan về địa điểm, hơn nữa ta có thể sử dụng được các dịch vụ đặc thù
của bản đồ như dẫn đường, tính khoảng cách đường đi, phân cụm... Vì thế,
chúng tôi xây dựng một ứng dụng trên nền web sử dụng bản đồ trực tuyến
Google Map để hiển thị các bản tin bất động sản. Theo đó, người dùng sẽ có
cái nhìn trực quan về địa điểm của các bản tin được đăng tải, ngoài ra người
dùng có thể sử dụng các dịch vụ đặc thù được cung cấp bởi dịch vụ bản đồ
như tìm kiếm theo các tiêu chí đặc thù trên bản đồ như khoảng cách, đường
đi, hiển thị dưới dạng phân cụm..
Dữ liệu của hệ thống được thu thập từ internet dưới dạng phi cấu trúc, dữ liệu
phi cấu trúc này được trích rút tự động bởi hệ thống Trích rút thông tin tự
động từ các bản tin bất động sản của nhóm tác giả Phạm Vi Liên, Phạm Bảo
Sơn. Dữ liệu sau trích rút là các file văn bản được gắn nhãn, có cấu trúc tựa
XML, do dữ liệu dạng này không được tối ưu cho thao tác tìm kiếm, vì thế
chúng tôi xây dựng hệ thống con khác để đưa dữ liệu dạng văn bản được gắn

10


nhãn này vào cơ sở dữ liệu, quá trình này cũng đồng thời xác định tọa độ của
bản tin trước khi đưa vào cơ sở dữ liệu thông qua dịch vụ Geocoding. Để đảm
bảo dữ liệu hệ thống được cập nhật liên tục chúng tôi đề xuất mô hình hoạt
động giữa các hệ thống như sau (Hình 1):

Hình 1.1: Mô hình hoạt động

Theo mô hình này, các thệ thống cùng hoạt song song với nhau, giao tiếp với
nhau một cách gián tiếp thông qua hệ thống file hoặc cơ sở dữ liệu. Trong
hình trên, hướng mũi tên thể hiện hướng luân chuyển của luồng thông tin:
- Information Extraction: Lấy đầu vào là các file văn bản dưới dạng phi
cấu trúc để tiến hành trích rút thông thông tin. Kết quả trích rút là các
file văn bản khác được gắn nhãn, file này có cấu trúc tựa XML.
- Data Importer: Lấy đầu vào là các file văn bản được gắn nhãn thu được
từ Information Extraction để đưa vào cơ sở dữ liệu, trong quá trình đọc
file để đưa vào cơ sở dữ liệu, Data Importer cũng đồng thời xác định
tọa độ đựa vào thông tin về địa điểm dưới dạng văn bản.
- LandNews: Lấy thông tin từ cơ sở dữ liệu để hiển thị, thông được lấy ra
từ việc tìm kiếm từ người dùng.

11


Chương 2. GOOGLE MAP API
2.1

Giới thiệu Google Map


Google Map là dịch vụ bản đồ trực tuyến của Google, hỗ trợ nhiều dịch vụ
khác nhau, nổi bật nhất là dịch vụ tìm đườ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. Từ góc nhìn của người
dùng cuối thì Google Map là một ứng dụng bản đồ trực tuyến. Thực tế,
Google Map không chỉ đơn thuần là một ứng dụng bản đồ trực tuyến, bởi
Google Map còn cung cấp một tập API cho phép các nhà phát triển ứng dụng
có thể sử dụng các dịch vụ của Google Map trong ứng dụng của họ. Ví dụ:
Một cơ quan bất động sản có thể sử dụng một ứng dụng sử dụng Google
Maps API dựa trên web, cho phép người sử dụng có thể tìm kiếm các khu đô
thị và kết quả được hiển thị trực quan trên Google Map.

Hình 2.1: Bản gồ Google Map

Với Google Map API ta có thể xây được các ứng dụng như:
- Đánh dấu và tìm kiếm các địa điểm trên bản đồ cùng các thông tin cho
địa điểm như các khu vui chơi giải trí, nhà hàng khách sạn, văn phòng,
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ông cộng, có thể là các địa điểm cung cấp như trên.
- Tìm các địa điểm theo khoảng cách, theo đường giao thông.

12


- Xây dựng bản đồ các tuyến đường xe đạp, đi bộ…
2.2

Các thành phần chính trên bản đồ Google Map


Hình 2.2: Các thành phần chính trên bản đồ Google Map

Hình vẽ trên cho ta thấy một số thành phần hay được sử dụng trong Google
Map API. Mỗi thành phần trong bản gồ Google Map được biểu diễn bởi một
đối tượng. Google Map API bao gồm các đối tượng chính sau:
- Map: Biểu diễn cho bản đồ Google Map.
- Marker: Biểu diễn cho một điểm được đánh dấu trên bản đồ, mỗi điểm
được thể hiện bằng một biểu tượng, các biểu tượng này có thể được
định nghĩa bởi Google hoặc một hình bất tùy chọn.
- InfoWindow: Thường được sử dụng kèm với Marker để hiện thông tin
liên quan đến Marker. Ví dụ trong một ứng dụng bất động sản ta có thể
hiển thị chi tiết của một căn nhà như: diện tích, giá bán, địa chỉ….
2.3

Nạp và hiển thị bản đồ

Để nạp và hiển thị bản đồ Google Map ta thực hiện theo các bước:
1. Tham chiếu đến Google Map API
13



var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>

Đầu tiên là khởi tạo môt đối tượng chứa các thông tin thiết lập bản đồ
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Với:
- center: Một điểm làm trung tâm của bản đồ, một điểm được xác
định bởi vĩ độ (Latitudes) và kinh độ (Longitudes). 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).
- 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
Sau đó tạo đối tượng Map với các thiết lập bản đồ như trên
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Đối tượng Map sẽ được hiển thị trong thẻ HTML được xác định bởi ID và

tùy chọn "myOptions" như trên.
Mã HTML và mã javascript để load và hiển thị Google Map như sau:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }

14


#map-canvas { height: 100% }
</style>

<div id="map-canvas"/>
</body>
</html>

2.4

Nạp và hiển thị bản đồ

Để nạp và hiển thị bản đồ Google Map ta thực hiện theo các bước:
3. Tham chiếu đến Google Map API (Sao chỉ số lại bắt đầu từ 3? – đoạn
này và đoạn trên giống hệt nhau?)

var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Với:

15


- center: Một điểm làm trung tâm của bản đồ, một điểm được xác
định bởi vĩ độ (Latitudes) và kinh độ (Longitudes). 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).
- 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
Sau đó tạo đối tượng Map với các thiết lập bản đồ như trên
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

Đối tượng Map sẽ được hiển thị trong thẻ HTML được xác định bởi ID và
tùy chọn "myOptions" như trên.
Mã HTML và mã javascript để load và hiển thị Google Map như sau:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>

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 di chuyển hoặc phóng to/thu nhỏ bản đồ.
Đối tượng overlays này được hiển thị ở phía trên bản đồ Google Map.
Overlays bao gồm các đối tượng trên bản đồ như markers, polylines, areas,
info windows, polygons. Mỗi đối tượng overlays này được thể hiện bởi một
lớp tương ứng là Marker, Polyline, Area, InfoWindows và Polygon.
Để thêm một overlays vào bản đồ, ta tạo ra đối tượng overlays và gắn vào bản
đồ bằng phương thức setMap. Chẳng hạn, để thêm một Marker vào bản đồ ta
viết như sau:
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
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!"
});
marker.setMap(map);// đối tượng map được khởi tạo ở trên

Marker được thêm vào bản đồ bằng cách tạo ra đối tượng Marker trong
javascripts cùng các tùy chọn của nó:
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});


Sau đó gọi phương thức setmap() để thêm vào bản đồ "marker.setMap(map)".
Để xóa một đối tượng tượng ra khỏi bản đồ ta gọi phương thức setMap của
đối tượng overlays với giá trị truyền vào là 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 khỏi bộ nhớ.
Thông thường, ta sử dụng một mảng để lưu các đối tượng overlays, vì thế để
loại bỏ khỏi bộ nhớ ta thiết lập lại độ dài của mảng về 0.
var map;
var markersArray = [];
function initialize() {

17


var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map

});
markersArray.push(marker);
}
// Loại bỏ overlays ra khỏi bản đồ, nhưng vẫn giữ lại trong bộ nhớ
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Hiển thị các overlays lên bản đồ
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Xóa bỏ các overlays ra khỏi bản đồ và thu hồi bộ nhớ
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}

2.5.1

Marker
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 độ. Mặc định Marker sử dụng biểu tượng (icon) của
Google làm hình ảnh đại diện cho điểm đánh dấu. Tuy nhiên ta cũng có thể

18


thiết lập một biểu tượng bất kỳ của mình bằng cách gọi phương thức
setIcon().
Các thuộc tính của Marker:
• 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à ta 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 giá trị có
thể thiết lập DRAG, DROP.
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
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,
title: "Hello World!",
draggable: true,
animation: google.maps.Animation.DROP
});

Ví dụ sau mô tả việc đánh dấu nhiều địa điểm trên bản đồ:
<script>
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(20.779227, 107.0755),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var image = "vietnam_32.png";

19


for (var i = 0; i < location.length; i++) {
var beach = location[i];
var myLatLng = new google.maps.LatLng(beach[0], beach[1]);

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}

};
var location = [
[20.817741, 106.751404],
[20.964004, 107.004089],
[20.807472, 106.99585]
];
</script>

Sẽ cho kết quả

Hình 2.3: Hiển thị các Marker trên bản đồ

2.5.2
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. Một polylines phải có ít nhất hai điểm để có thể tạo nên
một đoạn thằng.
Lớp Polyline có các thuộc tính:
• path: giá trị là một mảng chứa các tọa độ cần nối với nhau
20



• strokeColor: giá trị màu sắc
• strokeOpacity: độ đậm nhạt của màu sắc
• strokeWeight: độ rộng của đường
Đoạn mã javascript sau sẽ hiển thị các đường nối giữa các điểm được khai
báo trong mảng
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(21.010163, 105.817823);
var myOptions = {
zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(21.010163, 105.817823),
new google.maps.LatLng(20.998785, 105.84074),
new google.maps.LatLng(21.005676, 105.876961),
new google.maps.LatLng(21.037403, 105.84383)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>


Kết quả hiển thị như sau:

21


Hình 2.4: Hiển thị các Polylines trên bản đồ

2.5.3
Polygon
Tương tự như đối tượng Polylines, Polygon xây dựng dựa trên một loạt các
tọa độ, tuy nhiên thay vì mở thì nó hoàn toàn khép kín trong một khu vực.
Các thuộc tính của của đối tượng Polygon:
• paths: tập các tọa độ với tọa độ đầu trùng tọa độ cuối đảm bảo cho việc
khép kín.
• strokeColor: màu sắc của đường nối điểm
• strokeOpacity: độ đậm nhạt của màu
• strokeWeight: độ rộng đường nối
• fillColor: màu sắc của của vùng bên trong đường nối
• fillOpacity: độ đậm nhạt của vùng bên trong đường nối
Ví dụ sau tạo ra một Plygon từ 3 điểm khác nhau để tạo thành một vùng tam
giác khép kín.

22


<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(21.037403, 105.84383);
var myOptions = {

zoom: 14,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(21.037403, 105.84383),
new google.maps.LatLng(21.022983, 105.832672),
new google.maps.LatLng(21.02779, 105.867691),
new google.maps.LatLng(21.037403, 105.84383)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>

Sẽ cho kết quả hiển thị như sau:

23



Hình 2.5: Hiển thị các Polygon trên bản đồ

2.5.4
Circle
Circle dùng để thể hiện vòng tròn trên bản đồ. Một vòng tròn được đặc trưng
bởi tọa độ tâm và bán kính.
Lớp Circle có các thuộc tính:





center: tọa độ tâm của vòng tròn
radius: bán kính của vòng tròn
fillColor: giá trị màu sắc được hiển thị bên trong vòng tròn
strokeColor: giá trị màu sắc được hiển thị trên biên vòng tròn

24


Đoạn mã javascript sau sẽ hiển thị một vòng tròn trên bản đồ (Hình )
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src=" />type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
body {

text-align: center;
}
.gmap3 {
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript">
$(function () {
$('#googleMap').gmap3({
map: {
options: {
center: [21.00672, 105.78632],
zoom: 10
}
},
circle: {
values: [
{
options: {
center: [21.00672, 105.78632],
radius: 15000,
fillColor: "#F4AFFF",
strokeColor: "#CB53DF"
}
}
]
}

}
);
});
</script>
<body>
<div id="googleMap" class="gmap3"></div>
</body>
</html>

25


×