Công nghệ Google map API và ứng dụng
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 (1.17 MB, 45 trang )
1.PHẦN 1: GIỚI THIỆU VỀ DỰ ÁN PHẦN MỀM 2
1.1.Phạm vi và đối tượng sử dụng phần mềm: 3
1.2.Phương pháp nghiên cứu: 3
2.PHẦN 2: XÁC ĐỊNH NHU CẦU NGƯỜI DÙNG: 3
2.1.Phương pháp xác định nhu cầu: 3
2.2.Danh mục và mô tả chi tiết các nhu cầu người dùng: 4
3.PHẦN 3: PHÂN TÍCH BÀI TOÁN: 4
3.1.Lập sơ đồ trình tự thực hiện bài toán: 4
3.2.Phân tích kỹ thuật cho từng bước thực hiện bài toán: 5
4.PHẦN 4: SƠ ĐỒ LUỒNG DỮ LIỆU 6
5.PHẦN 5: THIẾT KẾ CƠ SỞ DỮ LIỆU 6
5.1.Thiết kế các bảng dữ liệu: 6
5.2.Lập sơ đồ quan hệ giữa các bảng dữ liệu: 9
6.PHẦN 6: THIẾT KẾ GIAO DIỆN 9
6.1.Các trang giao diện: 9
6.2.Quan hệ giữa các trang: 11
7.PHẦN 7 : KẾT LUẬN VÀ KIẾN NGHỊ 12
7.1.Kết luận của đề tài: 12
7.2.Kiến nghị: 12
7.3.Tài liệu tham khảo : 13
7.4.Hướng phát triển của phần mềm : 13
8.PHẦN 8: PHỤ LỤC GIỚI THIỆU VỀ GOOGLE MAP API 14
1
!
SVTH"#$
GVHD"!%&'(!
)! *)"+,-*,
Ở nước ta, số lượng các công trình giao thông đã và đang được xây dựng ngày
càng nhiều. Vì vậy công tác theo dõi, quản lý khai thác công trình, quản lý hồ sơ
thiết kế, đánh giá chất lượng và khả năng chịu lực của chúng ngày càng khó khăn,
phức tạp.
Để làm tốt các công tác này thì trước hết phải quản lý chặt chẽ hồ sơ của công
trình, bao gồm hồ sơ thiết kế gốc và các thông tin được cập nhật trong suốt quá
trình khai thác sử dụng công trình cũng như những thay đổi qua mỗi lần duy tu
hoặc sửa chữa.
Đặc điểm của hồ sơ thiết kế các công trình giao thông, nhất là ở nước ta,
thường hay bị thay đổi do nhiều nguyên nhân khác nhau dẫn đến làm sai lệch, độ
tin cậy không cao. Công tác lưu trữ, bảo quản cũng như phân loại chúng cũng gặp
rất nhiều khó khăn. Vì vậy việc nghiên cứu ứng dụng công nghệ thông tin để quản
lý các hồ sơ này đang trở thành rất cấp thiết.
Ngày nay sự phát triển của mạng Internet đã khiến người ta rất khó để từ chối
sử dụng nó. Vì vậy, tạo một ứng dụng hoạt động trên internet sẽ tạo sự thuận lợi
cho người sử dụng. Mặc khác, với dữ liệu về bản đồ được Google cung cấp miễn
phí thì ta khó có thể từ chối để “nhúng” nó vào ứng dụng của mình. Để đưa
Google Map lên website cá nhân, bạn không cần phải có khả năng lập trình "siêu
hạng", chỉ cần vài bước đơn giản và một ít kiến thức về HTML là có thể thực hiện
điều này. Yếu tố cần thiết để đưa Google Map lên website là khai thác giao diện
lập trình ứng dụng API (Application Programming Interface) của Google Map
được Google cung cấp cho người dùng.
Nhiệm vụ đặt ra là xây dựng một chương trình quản lý hồ sơ các công trình cầu
trên cơ sở sử dụng GOOGLE MAP API. Qua đó nâng cao kỹ năng ứng dụng tin
h‡c vào công tác thiết kế, quản lý và khai thác các công trình cầu đường.
2
Cuối cùng, tôi xin cảm ơn các thầy cô thuộc bộ môn Tự động hóa, đặc biệt là
thầy Lê Đắc Chỉnh đã tận tâm hướng dẫn tôi hoàn thành đề tài trong thời gian qua.
Do hạn chế về thời gian và năng lực nên đề còn sơ sài và nhiều thiếu xót, mong
quí thầy cô thông cảm và giúp đỡ để đề tài này được hoàn thiện hơn.
Tôi xin chân thành cám ơn!
)!)! ./012134526789:;<=>9:?.@90A0"
1.1.1. Phạm vi của bài toán:
Hệ thống trợ giúp việc lưu trữ và cung cấp thông tin về hồ sơ thiết kế các
công trình cầu.
1.1.2. Đối tượng sử dụng phần mềm:
Vì đây là phần mềm chuyên nghành nên đối tượng sử dụng chủ yếu mà
phần mềm muốn hướng tới là:
• Các cơ quan quản lí công trình giao thông.
• Các kỹ sư công trình.
• Những người dân quan tâm.
)!B! .7C9:?.D?9:.2E9FGH"
• Nghiên cứu cách thức sử dụng Google Map API.
• Nghiên cứu cấu trúc của hồ sơ thiết kế cầu.
• Nghiên cứu ngôn ngữ lập trình Javascript.
• Nghiên cứu ASP.NET để thiết kế ứng dụng Web.
B! *B"I&J*KLM"
B!)! .7C9:?.D?NDF4O9.9.HF@H"
Phương pháp sử dụng để xác định nhu cầu người dùng là điều tra và khảo sát
kết hợp với phỏng vấn người dùng với các câu hỏi đưa ra như:
• Cách thức lưu trữ hồ sơ hiện nay?
• Yêu cầu về cấu trúc hồ sơ công trình?
• Nhược điểm của hệ thống cũ?
• …
3
Phương pháp này được áp dụng vì giúp ta tiếp cận rõ vấn đề quan tâm, yêu cầu
cần thiết đối với hệ thống dự định sẽ làm, những nhược điểm của hệ thống đang
tồn tại.
B!B! P9.0>F130Q6RF.262S6FDF9.HF@H9:7T2=U9:"
STT Tên nhu cầu Mô tả
1 Giao diện dễ sử dụng Yêu cầu phải thiết kế lệnh bằng
menu, có bản đồ hiển thị vị trí công
trình.
2 Ngôn ngữ lập trình Sử dụng ngôn ngữ mới nhất để có
độ tin cậy cao và dễ dàng nâng cấp.
3 Yêu cầu về lưu trữ Phải đảm bào an toàn cho dữ liệu,
dữ liệu phải được BackUp thường
xuyên.
V! *V"WX"
V!)! Y?;C4Z6[\9.6]6.]F.2^9_326`D9"
4
V!B! .a96bF.cd6.HY6F.`6e9:_7fF6.]F.2^9_326`D9"
1.1.3. Khối chức năng “Đăng nhập” và “Kiểm tra”:
• Đầu vào:
Username.
Password.
• Đầu ra: TRUE or FALSE.
• Giải thuật:
Phần mềm yêu cầu người người dùng đăng nhập bằng Account đã cung cấp
sẵn để có thể sử dụng được các chức năng “Tạo mới”, “Chỉnh sửa”, “Xóa”. Tìm
kiếm trong CSDL, nếu tồn tại thì trả về giá trị “TRUE”, ngược lại là “FALSE”.
Nếu bỏ qua bước này thì mặc định kết quả trả về sẽ là “FALSE”.
1.1.4. Khối chức năng “Tạo mới hồ sơ”:
• Đầu vào:
Thông tin chung về hồ sơ.
Thông tin kỹ thuật của hồ sơ.
Các loại hồ sơ cần thiết (khảo sát,thuyết minh, bản vẽ, dự toán…)
• Đầu ra: không có
• Giải thuật:
Không yêu cầu phải nhập đầy đủ dữ liệu. Phần mềm sẽ lưu dữ liệu vào CSDL với
cấu trúc đã định sẵn.
1.1.5. Khối chức năng “Xem hồ sơ”:
• Đầu vào: ID hồ sơ.
• Đầu ra:
Thông tin chung về hồ sơ.
Thông tin kỹ thuật của hồ sơ.
Các loại hồ sơ.
• Giải thuật: Phần mềm sẽ truy xuất thông tin của hồ sơ từ cơ sở dữ liệu.
1.1.6. Khối chức năng “Chỉnh sửa”:
• Đầu vào:
• Cung cấp các thông tin cần chỉnh sửa.
• Đầu ra: không có.
• Giải thuật:
Phần mềm sẽ chỉnh sửa dữ liệu trong CSDL.
1.1.7. Khối chức năng “Xóa”:
5
• Đầu vào: ID của hồ sơ.
• Đầu ra: không có.
• Giải thuật:
Phần mềm sẽ tìm trong CSDL hồ sơ có ID như trên và xóa khỏi CSDL.
g! *g"&h!
i! *i"jh
i!)! .2S6cSFDF_R9:=kl2^H"
• Bảng 29."
6
7
• Bảng PH:
• Bảng;m["
8
i!B! Y?;C4ZnHP9.^:2kPFDF_R9:=kl2^H"
o! *o"!
o!)! DF6[P9::2P`=2^9"
- Default: Xuất hiện khi mở chương trình.
9
Khi ch‡n hồ sơ để xem:
10
- CreatNew: tạo hồ sơ mới.
- Modify: Chỉnh sửa hồ sơ.
o!B! HP9.^:2kPFDF6[P9:"
11
p! *p"qJ!
p!)! S6lHY9FrP4A632"
• Đề tài đã tập trung giải quyết các vấn đề sau:
Nghiên cứu hồ sơ thiết kế cầu
Nghiên cứu GOOGLE MAP API.
Ứng dụng GOOGLE MAP API để nhúng bản đồ Google vào trang web.
Xây dựng trang web quản lí hồ sơ thiết kế công trình cầu.
• Những vấn đề tồn tại:
Trong phạm vi của một chuyên đề tốt nghiệp kỹ sư, do hạn chế về năng lực và
thời gian nên đề tài còn sơ sài và nhiều thiếu sót. Đề tài chỉ tập trung nghiên cứu
cơ sở dữ liệu của hồ sơ thiết kế cầu và ứng dụng GOOGLE MAP API vào công
tác quản lí hồ sơ thiết kế cầu, chưa nghiên cứu cơ sở dữ liệu, các tùy biến l‡c, tổng
hợp dữ liệu trong cơ sở dữ liệu và các loại hồ sơ khác.
• Kết luận:
Việc nghiên cứu để ứng dụng một chương trình quản lý vào điều kiện thực tế
là một vấn đề khá phức tạp, đòi hỏi một quy mô nghiên cứu lớn hơn. Với thời gian
còn hạn chế, và năng lực có hạn, việc giải quyết vấn đề trên chỉ là những kết quả
bước đầu, những đánh giá ban đầu làm cơ sở cho các bước tiếp theo.
Rất mong nhận được sự góp ý, chỉ bảo của các thầy cô và các bạn để giúp cho
chương trình được hoàn thiện hơn.
p!B! 2S99:.O"
Đề tài “ Ứng dụng Google Map API vào công tác quản lí hồ sơ thiết kế
CTGT “ là một đề tài rất hay và thực tế, nó cần thiết cho các nhà quản lý. Tôi
12
mong rằng nếu chương trình của tôi được nâng cấp và phát triển hoàn thiện thì nó
rất có hữu ích cho việc quản lý các công trình giao thông.
p!V! 32l2^H6.P0c.R`"
• google.com.
• code.google.com
• Cùng các diễn đàn tin h‡c trong và ngoài nước.
p!g! 7f9:?.D66[2s9FrP?.@90A0"
Vì đây là phần mềm chuyên nghành giao thông nên hướng phát triển của
phần mềm sẽ bổ sung các tính năng sau :
• Quản lí hồ sơ thiết kế công trình đường.
• Quản lí địa chất công trình.
• Quản lí thủy văn công trình.
13
t! *t"+,!
1.2. 2f26.2^HF.H9::
Google Maps API cho phép bạn nhúng Google Maps vào các trang
web riêng của bạn bằng cách sử dụng ngôn ngữ JavaScript. API cung cấp
một số tiện ích cho các thao tác bản đồ (giống như trên trang web
) và thêm vào nội dung bản đồ thông qua một loạt
các dịch vụ, cho phép bạn tạo ra các ứng dụng bản đồ trên trang web của
bạn một cách mạnh mẽ.
1.3. DF.9.u9:1342AHc.2s90v6_R94Z``:lm6[`9:6[P9:wm_:
Tôi sẽ mô tả cách nhúng và điều khiển một bản đồ Googe vào trang
web thông qua một ví dụ cụ thể.
<! DOCTYPE html "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
"
<html xmlns="
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Google Maps API </ title>
<script src = " " type = "text /
javascript">
</ script>
<script type="text/javascript">
function initialize ()
{
if (GBrowserIsCompatible ())
{
var map = new GMap2 (document.getElementById ( "MyMap"));
map.setCenter (new GLatLng (37.4419, -122.1419), 13);
map.setUIToDefault (); } }
</ script>
</ head>
<body onload="initialize()" onunload="GUnload()">
<div id="MyMap" style="width: 500px; height: 300px"> </ div>
</ body>
</ html>
14
Trong đó:
<script src = " " type = "text / javascript">
</ script>
URL />file=api&v=2&key=abcdefg trỏ tới vị trí của file JavaScript bao gồm tất
cả các biểu tượng và định nghĩa cần thiết để sử dụng Google Maps API.
Trang web của bạn phải chứa một từ khóa script trỏ đến URL này, bằng
cách sử dụng Key mà bạn nhận được khi bạn đã đăng ký cho API. Trong ví
dụ này Key được hiển thị như là abcdefg.
Đối với bản đồ, để hiển thị trên một trang web, chúng ta phải đặt
một chỗ cho nó. Thông thường, chúng ta làm điều này bằng cách tạo một
phần tử div và tham chiếu đến phần tử này trong trình duyệt của mô hình
đối tượng tài liệu (DOM).
Trong ví dụ trên, chúng ta xác định một div tên "MyMap" và thiết
lập kích thước của nó bằng cách sử dụng các thuộc tính. Trừ khi bạn xác
định một cách rõ ràng kích thước cho bản đồ bằng cách sử dụng
GMapOptions trong constructor, bản đồ hoàn toàn dùng kích cỡ của nơi
chứa (phần tử div) để làm kích cỡ của nó.
15
<div id="MyMap" style="width: 500px; height: 300px"> </ div>
1.3.1. Đối tượng cơ bản Gmap2
Var map = new GMap2 (document.getElementById ( "MyMap"));
Lớp JavaScript đại diện cho một bản đồ là lớp GMap2. Đối
tượng của lớp này xác định một bản đồ trên một trang. (Bạn có thể
tạo ra nhiều đối tượng của lớp này - mỗi đối tượng sẽ xác định một
bản đồ riêng biệt trên trang web). Chúng ta tạo ra một đối tượng mới
của lớp này bằng cách sử dụng mã toán tử JavaScript 9mw.
Khi bạn tạo một bản đồ mới, bạn chỉ định một DOM node
trong trang web (thường là một phần tử =21) như là một nơi chứa cho
các bản đồ. HTML nodes là con của JavaScript đối tượng =`FH0m96,
và chúng ta tham chiếu đến phần tử này thông qua phương thức
=`FH0m96!:m6lm0m96Xx=yz.
Mã này định nghĩa một biến (tên map) và chỉ định biến này là
một đối tượng GMap2 mới. Hàm GMap2() được biết đến như một
constructor và định nghĩa như sau:
`9;6[HF6`[ Q6R
GMap2(container:node,
opts?:GmapOption)
Tạo ra một bản đồ mới bên trong HTML
container đã được định sẵn,thường là một
phần tử DIV. Bạn cũng có thể đặt các loại
tham số tùy ch‡n của GMap2Options trong
tham số opts.
1.3.2. Khởi tạo bản đồ:
map.setCenter (new GLatLng (37.4419, -122.1419), 13);
map.setUIToDefault ();
Sau khi chúng ta đã tạo ra một bản đồ thông qua GMap2
constructor, chúng ta cần phải khởi tạo nó. Điều này được thực hiện
bằng cách sử dụng phương setCenter() của đối tượng P?. Phương
16
thức setCenter()đòi hỏi một GLatLng phối hợp và một cấp độ phóng to
và phương thức này phải được gửi trước bất kỳ một hành động nào
khác được thực hiện trên bản đồ, bao gồm các thiết lập thuộc tính
khác của bản.
Ngoài ra, chúng ta cũng g‡i setUIToDefault() trên map. Phương
thức này thiết lập giao diện người dùng của bản đồ với cấu hình mặc
định, bao gồm các điều khiển phóng to (Zoom), di chuyển(Pan), lựa
ch‡n các loại bản đồ, v.v
1.3.3. Tải bản đồ:
<body onload="initialize()" onunload="GUnload()">
Trong khi đưa một trang HTML, các tài liệu mô hình đối tượng
(DOM) được xây dựng lên, và những ngoài hình ảnh và các tập lệnh
được tiếp nhận và kết hợp với các đối tượng document. Để đảm bảo
rằng các bản đồ của chúng ta là chỉ được đặt trên trang web sau khi
trang đã nạp đầy đủ, chúng ta chỉ thực hiện hàm mà xây dựng các đối
tượng GMap2 sau khi phần tử <body> của các trang HTML nhận được
một sự kiện onload. Làm như thế tránh các hành vi không dự định và
dễ dàng điều khiển hơn khi bản đồ được vẽ ra.
Thuộc tính onload là một ví dụ về một sự kiện handler. Google
Maps API cũng cung cấp một số các sự kiện mà bạn có thể "lắng
nghe" để quyết định những thay đổi.
Hàm GUnload() là một hàm tiện ích được thiết kế để ngăn chặn
sự rò rỉ bộ nhớ (memory leaks).
1.3.4. Latitudes và Longitudes:
Bây giờ chúng ta có một bản đồ, chúng ta cần có một cách để
tham chiếu các địa điểm trên bản đồ. Đối tượng GLatLng cung cấp một
cơ chế như vậy trong Google Maps API. Bạn xây dựng một đối tượng
GLatLng, thông qua các thông số của nó theo thứ tự (latitude, longitude)
như thứ tự trong khoa bản đồ h‡c.
17
var myGeographicCoordinates = new GLatLng (myLatitude, myLongitude)
Nó rất hữu ích để tham chiếu một cách dễ dàng vào một điểm
địa lý, nó cũng hữu ích để xác định giới hạn địa lý của một đối tượng.
Ví dụ, một bản đồ hiện tại sẽ hiển thị một "cửa sổ" chứa toàn bộ thế
giới được biết đến như một viewport. Viewport này có thể được xác
định bởi những điểm ở các góc của hình chữ nhật. Đối tượng
GLatLngBounds cung cấp tính năng này, xác định một vùng chữ nhật
bằng cách sử dụng hai đối tượng GLatLng đại diện cho những góc tây
nam và đông bắc của bounding .
Những đối tượng GLatLng được sử dụng nhiều trong Google
Maps API. Các đối tượng GMarker dùng một GLatLng trong
constructor của nó, ví dụ, đặt một Marker Overlay trên bản đồ tại vị trí
địa lý nào đó.
1.3.5. Các thuộc tính của bản đồ:
Mỗi bản đồ có chứa một số lượng các thuộc tính mà ta có thể
xem hoặc thiết lập. Ví dụ, để tìm thấy kích thước của các viewport hiện
tại, sử dụng phương thức getBounds() của đối tượng GMap2 để trả về
một giá trị GLatLngBounds.
Mỗi bản đồ cũng chứa một cấp độ phóng to, nó xác định độ phân
giải của khung nhìn. Cấp độ Zoom từ 0 (Cấp độ thấp nhất, trong đó toàn
bộ thế giới có thể được nhìn thấy trên bản đồ) đến 19 (cấp độ cao nhất,
trong đó có thể nhìn thấy các tòa nhà) là có thể có trong bản đồ bình
thường.
Cấp độ Zoom khác nhau tùy thuộc vào những nơi trên thế giới
mà bạn đang tìm kiếm, như các dữ liệu trong một số phần của thế giới
được xác định chi tiết hơn nhiều so với những nơi khác.
Bạn có thể nhận lại cấp độ phóng to hiện thời của bản đồ bằng
cách sử dụng phương thức getZoom() của đối tượng GMap2.
Ngoài ra, "kiểu" của bản đồ xác định hình ảnh của bản đồ.
1.3.6. Các kiểu bản đồ:
18
Có rất nhiều loại bản đồ có sẵn trong Google Maps API. Theo
mặc định, bản đồ hiển thị trong Google Maps API là bản đồ đường. Tuy
nhiên, Google Maps API cũng hỗ trợ các loại bản đồ khác.
Các loại bản đồ thường được dùng trong Google Map API:
• G_NORMAL_MAP hiển thị bản đồ đường, mặc định.
• G_SATELLITE_MAP hiển thị bản đồ ảnh vệ tinh Google Earth
• G_HYBRID_MAP sẽ hiển thị hỗn hợp bản đồ đường và bản đồ
ảnh vệ tinh.
• G_DEFAULT_MAP_TYPES chứa một mảng ba loại bản đồ
trên.
• G_PHYSICAL_MAP sẽ hiển thị một bản đồ vật lý dựa trên các
thông tin về địa hình.
Bạn có thể thiết lập bản đồ bằng cách sử dụng phương thức
setMapType() của đối tượng GMap2.
Var map = new GMap2 (document.getElementById ( "MyMap"));
map.setMapType (G_SATELLITE_MAP);
1.3.7. Tương tác với bản đồ:
Bây giờ bạn có một đối tượng GMap2, bạn có thể tương tác với
nó. Các đối tượng GMap2 có thể cung cấp một số cấu hình của các
phương thức để thay đổi hành vi của đối tượng bản đồ.
Theo mặc định, đối tượng bản đồ có xu hướng tác động trở lại
người sử dụng như những gì nó làm trên trang .
Tuy nhiên, bạn có thể thay đổi hành vi này bằng một số phương thức
hữu ích. Ví dụ, phương thức GMap2.disableDragging() có tác dụng vô
hiệu hóa khả năng nhấp chuột và kéo bản đồ (click and drag) đến một vị
trí mới.
Bạn cũng có thể tương tác với bản đồ lập trình. Đối tượng
GMap2 hỗ trợ một số phương thức để thay đổi trạng thái bản đồ trực
tiếp. Ví dụ, các phương thức setCenter(), panTo và zoomIn() hoạt động
trên bản đồ lập trình, hơn thế nữa thông qua sự tương tác người dùng.
Ví dụ sau sẽ hiển thị một bản đồ và cung cấp một nút để bắt đầu
một phương thức panTo, và canh giữa bản đồ tại một điểm cho trước.
Nếu điểm xác định nằm trong phần nhìn thấy của bản đồ thì bản đồ sẽ
19
“pan” một cách mượt mà (smoothly) đến điểm đó, ngược lại, bản đồ sẽ
nhảy (jump) đến điểm đó.
var map;
function initialize () {
if (GBrowserIsCompatible ()) {
var map = new GMap2 (document.getElementById ( "MyMap"));
map.setCenter (new GLatLng (37.4419, -122.1419), 13);
}
}
function Animate () {
map.panTo (new GLatLng (37.4569, -122.1569));
}
1.3.8. Các cửa sổ thông tin (Info windows):
Mỗi bản đồ trong Google Maps API có thể hiển thị một "cửa sổ
thông tin" (Info Window) của kiểu GInfoWindow mà nội dung HTML
sẽ hiển thị trong một cửa sổ nổi trên bản đồ. Các cửa sổ thông tin
trông giống như một bong bóng vui nhộn: nó có một vùng nội dung và
một cái chân hình nêm, đầu nh‡n của hình nêm là một điểm được xác
định trên bản đồ. Bạn có thể xem cửa sổ thông tin bằng cách nhấp
chuột vào một điểm đánh dấu (marker) trên bản đồ.
Đối tượng GInfoWindow không có constructor. Một cửa sổ
thông tin được tự động tạo ra và kèm theo bản đồ khi bạn tạo bản đồ.
Bạn không thể hiển thị nhiều hơn một cửa sổ thông tin tại một thời
điểm cho một bản đồ, nhưng bạn có thể di chuyển cửa sổ thông tin và
thay đổi nội dung của nó khi cần thiết.
Đối tượng GMap2 cung cấp một phương thức openInfoWindow(),
trong đó có một điểm và một phần tử HTML DOM làm đối số.
HTML DOM là phần tử gắn vào nội dung của cửa sổ thông tin, và đầu
nh‡n của cửa sổ thông tin được neo vào một điểm cho trước.
Phương thức openInfoWindowHtml() của đối tượng GMap2 là
phương thức tương tự, nhưng lấy một chuỗi HTML làm đối số thứ hai
chứ không phải là một đối tượng DOM.
Để tạo một cửa sổ thông tin, g‡i phương thức openInfoWindow,
truyền cho nó một vị trí và một phần tử DOM để hiển thị. Ví dụ sau
20
sẽ hiển thị một cửa sổ thông tin đặt ở trung tâm của bản đồ với một
tin nhắn đơn giản "Hello, world".
Var map = new GMap2 (document.getElementById ( "MyMap"));
map.setCenter (new GLatLng (37.4419, -122.1419), 13);
map.openInfoWindow (map.getCenter (), document.createTextNode ( "Hello, world"));
1.4. ]c2^9FrP_R94Z"
1.4.1. Tổng quan về sự kiện của bản đồ:
Javascript trong trình duyệt là event driven, có nghĩa là
JavaScript phản ứng lại sự tương tác bằng cách tạo ra các sự kiện, và
chờ đợi chương trình lắng nghe sự kiện cần quan tâm. Ví dụ, trong các
trình duyệt, người dùng sử dụng con chuột và bàn phím tương tác để tạo
ra các sự kiện mà truyền vào trong DOM. Chương trình quan tâm đến
một số sự kiện sẽ đăng ký vào JavaScript m1m96l2;6m9m[; cho những sự
kiện đó và thực hiện mã lệnh khi những sự kiện đó được nhận.
1.4.2. Event Listeners:
Những sự kiện trong Google Maps API được xử lý bằng cách
sử dụng các hàm tiện ích trong không gian tên GEvent để đăng ký
Event Listeners. Mỗi đối tượng Maps API xuất ra một số các sự kiện.
Ví dụ, đối tượng GMap2 xuất ra các sự kiện click, dblclick và move, và
một số các sự kiện khác. Mỗi sự kiện xảy ra trong một bối cảnh nào
đó, và có thể truyền các đối số xác định bối cảnh này. Ví dụ, sự kiện
mousemove xảy ra khi người dùng di chuyển con chuột trong một đối
tượng bản đồ, và truyền GLatLng của vị trí địa lý vào vị trí của con
chuột.
Để đăng ký thông báo của các sự kiện, sử dụng phương thức
tĩnh GEvent.addListener(). Phương thức này lấy một đối tượng, một sự
kiện để lắng nghe , và một hàm để g‡i khi sự kiện được xác định xảy
ra. Ví dụ, đoạn mã sau hiển thị một cảnh báo mỗi khi người dùng
bấm chuột vào bản đồ:
21
Var map = new GMap2 (document.getElementById ( "MyMap"));
map.setCenter (new GLatLng (37,4419, -122.1419), 13);
GEvent.addListener (map, "click", function () {
alert ( "You clicked the map.");
});
“Listeners” cũng có thể bắt bối cảnh của sự kiện. Ví dụ sau sẽ
hiển thị vĩ độ (Latitude) và kinh độ (Longitude) của trung tâm bản đồ
sau khi người dùng kéo (drag) bản đồ.
Var map = new GMap2 (document.getElementById ( "MyMap"));
GEvent.addListener (map, "moveend", function () {
var center = map.getCenter ();
document.getElementById ( "message"). innerHTML = center.toString ();
});
map.setCenter (new GLatLng (37.4419, -122.1419), 13);
1.4.3. Sử dụng Closures trong Event Listeners:
Khi thực hiện một Event Listener, thông thường sẽ là rất thuận
lợi nếu có cả sự bảo mật (private) và các dữ liệu kèm theo một đối
tượng. Javascript không hỗ trợ "private" dữ liệu, nhưng nó có hỗ trợ
closures , cho phép các hàm bên trong truy cập vào các biến bên
ngoài. Closures là hữu ích trong Event Listeners để truy cập các biến
không bình thường kèm theo đối tượng khi các sự kiện xảy ra.
Ví dụ sau sử dụng một hàm closure trong Even Listener để ấn
định một thông điệp bí mật vào một tập hợp các điểm đánh dấu
(marker). Bấm vào các điểm đánh dấu sẽ xem một phần của thông
điệp bí mật, mà không được chứa trong các điểm đánh dấu.
var map = new GMap2(document.getElementById("MyMap"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
function createMarker(point, number) {
var marker = new GMarker(point);
var message = ["This","is","the","secret","message"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
map.openInfoWindowHtml(point, myHtml);
22
});
return marker;
}
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
1.4.4. Sử dụng những biến truyền vào sự kiện:
Rất nhiều sự kiện trong hệ thống các sự kiện của Maps API
truyền đối số khi sự kiện này được kích hoạt. Bạn có thể truy cập các
đối số bằng cách truyền trực tiếp các biểu tượng xác định đến các hàm
trong Event Listeners.
Trong ví dụ dưới đây, chúng ta thử nghiệm để đảm bảo đã được
bấm vào bản đồ bằng cách kiểm tra nếu đối số latlng được xác định,
nếu như vậy, chúng ta mở một cửa sổ và hiển thị t‡a độ đã được chuyển
đổi sang t‡a độ màn hình cùng với cấp độ phóng to (zoom level).
var map = new GMap2(document.getElementById("MyMap"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " +
map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
1.4.5. Kết nối sự kiện với đối tượng:
Thông thường các sự kiện tác động trực tiếp lên đối tượng nhận
được sự kiện. Ví dụ, nếu bạn đính kèm một sự kiện 'click' vào Event
23
Listener của đối tượng GMap2, bạn thường g‡i các phương thức lên
bản đồ bên trong hàm của Event Listeners.
Bạn có thể kiểm tra hành vi này trong mã lệnh của bạn bằng cách
thay thế một tham chiếu đối tượng đến hành vi này, nếu Event Listeners
tác động đến đối tượng nhận sự kiện thì sự kiện này và đối tượng được
tham chiếu tương ứng với nhau.
var map = new GMap2(document.getElementById("MyMap"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
var map = new GMap2(document.getElementById("MyMap"));
GEvent.addListener(map, "moveend", function() {
var center = this.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
Thay vì g‡i một trong các phương thức trên một đối tượng riêng
biệt để phản ứng lại các sự kiện, bạn có thể sử dụng GEvent.bind() để
ràng buộc một phương thức cho một đối tượng.
Trong ví dụ sau, Event Lisener sẽ ràng buột sự kiện 'click' của
bản đồ đến đối tượng Counter, và cho g‡i một phương thức được xác
định trong đối tượng này:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("MyMap"));
var myCounter = new Counter();
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.bind(map, "click", myCounter, myCounter.increment);
}
}
function Counter() {
this.counter = 0;
}
Counter.prototype.increment = function() {
this.counter++;
alert("You have clicked the map " + this.counter +
24
(this.counter == 1 ?" time":" times"));
}
1.4.6. Lắng nghe sự kiện DOM:
Mô hình sự kiện của Google Maps API tạo ra và quản lý các
sự kiện. Tuy nhiên, DOM cũng tạo ra và gửi các sự kiện theo cách
mà mô hình sự kiện của trình duyệt sử dụng. Nếu bạn muốn bắt và
đáp ứng với các sự kiện, Google Maps API cung cấp cho trình
duyệt trung gian những gói để lắng nghe và ràng buộc sự kiện
DOM, mà không cần phải tùy chỉnh mã lệnh.
Phương thức tĩnh GEvent.addDomListener() đăng ký một sự
kiện handler cho một sự kiện DOM ở DOM node. Tương tự như
vậy, phương pháp tĩnh GEvent.bindDom() cho phép bạn đăng ký
sự kiện handlers cho sự kiện DOM ở các trường hợp lớp.
1.4.7. Gỡ bỏ Event Listener:
Khi một Event Listener không còn cần thiết, bạn nên gỡ bỏ nó.
Điều này là cần thiết, ngay cả trong trường hợp sự kiện này chỉ xảy ra
một lần. Gỡ bỏ sự kiện đã được xác định thông qua một hàm ẩn danh
trong Fl`;H[m; có thể rất khó khăn. Tuy nhiên, addListener()
addDomListener() bind() và bindDom() trả lại một hàm điều khiển
GEventListener, mà có thể sử dụng để xóa các điều khiển đó (handler).
Ví dụ sau phản hồi lại một cú nhấp chuột bằng cách đặt một
điểm đánh dấu trên bản đồ. Bất kì cú nhấp chuột tiếp theo nào sẽ gỡ bỏ
Event Listener.
function MyApplication() {
this.counter = 0;
this.map = new GMap2(document.getElementById("MyMap"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
if (this.counter == 0) {
if (latlng) {
this.map.addOverlay(new GMarker(latlng))
25
