sử dụng công nghệ .NET trên nền Web 2.0 kết hợp với Google Map API.

Với sự phát triển mạnh mẽ trong lĩnh vực bản đồ các công ty ở Việt Nam như bamboo, địa danh đã xây dựng cơ sở dữ liệu của mình, hiển thị thông tin dựa trên bản đồ của google

MỤC LỤC

LỜI NÓI ĐẦU 2

CHƯƠNG 1: GIỚI THIỆU CHUNG 3

1.1 Giới thiệu các công nghệ 3

1.2 Một số trang web về du lịch có sử dụng bản đồ trực tuyến 8

CHƯƠNG 2: GOOGLE MAP API 11

2.1 Basics (Cơ bản) 11

2.2 Event (Sự kiện) 15

2.3 ConTrol(Điều khiển) 18

2.4 Overlays(Phủ trên bản đồ) 25

CHƯƠNG 3: HỆ THỐNG BẢN ĐỒ TRỰC TUYẾN SỬ DỤNG GOOGLE MAP API

30 3.1 Các công nghệ đã sử dụng 30

3.2 Mô tả bài toán 32

3.3 Biểu đồ luồng dữ liệu 36

3.4 Thiết kế cơ sở dữ liệu vật lý 39

1 Table : Tài khoản 39

2 Table: Thủ đô 39

3 Table : Địa lý 39

5 Table : Thông tin khác 40

6 Table : Video 40

3.5 Thiết kế về mặt giao diện 41

TỔNG KẾT 45

LỜI NÓI ĐẦU

Như chúng ta đã biết bản đồ từ thời xa xưa giúp con người có thể xác địnhđược phương hướng, vị trí chính xác nơi mình muốn đến, cần đến, giúp cho họ

có thể hiểu biết đầy đủ về vùng địa lý mà họ tìm hiểu Ngày nay với sự giúp đỡcủa công nghệ thông tin người ta có thể ngồi tại một chỗ và tìm kiếm chính xácđến một vùng nào đó trên thế giới bằng bản đồ trực tuyến.Hiện nay, bản đồ trựctuyến là một trong những lĩnh vực phát triển mạnh mẽ được hầu hết các nơi trênthế giới xây dựng và Việt Nam không nằm ngoài số đó

Trên thế giới google đã xây dựng được một bản đồ trực tuyến của toàn thếgiới và cung cấp các API cho người lập trình để có thể tự xây dựng bản đồ trựctuyến ở đất nước mình

Với sự phát triển mạnh mẽ trong lĩnh vực bản đồ các công ty ở Việt Namnhư bamboo, địa danh đã xây dựng cơ sở dữ liệu của mình, hiển thị thông tindựa trên bản đồ của google Chúng ứng dụng bởi rất nhiều công nghệ khác nhaunhư NET, PHP, JSP…Cùng xu hướng đó tôi đã xây dựng một trang web về lĩnhvực bản đồ trực tuyến cho việc hiển thị thông tin gồm thông tin text, hình ảnh vàvideo của tất cả các thủ đô trên thế giới Ở đây tôi sử dụng công nghệ NET trênnền Web 2.0 kết hợp với Google Map API

CHƯƠNG 1: GIỚI THIỆU CHUNG 1.1 Giới thiệu các công nghệ

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 Môn bản đồ là khoa học và nghệ thuật vẽ bản đồ

Người sử dụng có thể bổ sung các nguồn dữ liệu của riêng mình trên nền dữ liệu địa lý toàn cầu mà không cần phải có dữ liệu gốc Đặc biệt, hiện CIREN đang cung cấp một ứng dụng miễn phí là Gaia 3.0 để khai thác dịch vụ WMS Trong thời gian tới, CIREN cung cấp các đường liên kết tới các dịch vụ WMS và đường link tới các dịch vụ WMS quốc tế

1.1.2 Công nghệ Web 2.0

Sẽ thật tuyệt với nếu vào một ngày nào đó, chỉ với một chiếc máy tính được cài đặtmột hệ điều hành và một trình duyệt web duy nhất mà bạn lại có thể thực hiện đượcnhững công việc như soạn thảo văn bản, chỉnh sửa ảnh, lập bảng tính, chat, chuyển đổi tàiliệu trực tuyến mà không cần phải cài thêm bất cứ một trình ứng dụng nào Chuyện nàyhoàn toàn không chỉ là một giấc mơ, bởi hiện tại nó đã và đang được phát triển dưới têngọi là Web 2.0

Web 2.0 là thế hệ thứ hai của các dịch vụ đang tồn tại trên nền World Wide Web, nócho phép mọi người có thể cộng tác hay chia sẻ các thông tin trực tuyến với nhau Tráingược với thế hệ đầu, Web 2.0 đưa người sử dụng tới gần hơn các ứng dụng chạy trênDesktop so với các trang web bình thường chỉ chứa đựng các thông tin dạng tĩnh Quyước chung về Web 2.0 đã được đưa ra tại các cuộc hội thảo O'Reilly Media và MediaLiveInternational về phát triển web vào năm 2004 Các ứng dụng của Web 2.0 có sự kết hợpcủa các công nghệ được phát triển vào cuối thập niên 1990, bao gồm web service APIs(1998), Ajax (1998) và web syndication (1997) Chúng cho phép đưa lên trang web một

số lượng lớn các phần mềm chạy trên nền web Quy ước này còn bao gồm cả Blog (trangtin cá nhân) và Wiki (từ điển bách khoa mã nguồn mở)

Hiện tại Web 2.0 đã phát triển khá mạnh và các trang web cung cấp các ứng dụngchạy trực tuyến cũng đã được khá nhiều người sử dụng, có thể kể ra một số các trang websau:

 Trang web cung cấp dịch vụ chat trực tuyến () cho phép bạn chat thẳng trênnền web mà không phải cài đặt các chương trình chat thông dụng nhưYahoo Messenger, MSN

 Trang web cung cấp dịch vụ soạn thảo văn bản trực tuyến () cho phép bạnsoạn thảo các tài liệu trực tuyến giống như soạn thảo bằng các chương trìnhbình thường

 Trang web cung cấp dịch vụ soạn thảo tài liệu đa năng () cho phép soạnthảo và chỉnh sửa các loại tài liệu với các định dạng PDF/DOC/HTML

 Trang web lưu trữ dữ liệu trực tuyến () cho phép lưu trữ dữ liệu lên đến 5

GB và có thể truy xuất mọi lúc, mọi nơi Ngoài ra nó còn tính năng bảo vệchống virus và hư hỏng

 Trang web giúp tạo các trang tin cá nhân () cho phép bạn có thể tạo ra cáctrang web cá nhân với nội dung tùy thích Nó cho phép đưa vào các thôngtin hay các ứng dụng trực tuyến vào trang cá nhân này

 Trang web cung cấp dịch vụ tìm bản đồ () - (ảnh) cho phép bạn tra cứu bản

đồ của mọi nơi trên thế giới

mash up

Khi Web 2.0 đang dần trở nên thịnh hành thì cùng với nó công nghệ Mashup ra đời

và mặc dù chỉ mới phát triển trong thời gian gần đây nhưng nó đã tạo nên một cuộc cáchmạng lớn trong lĩnh vực này Mashup cho phép mọi người thể hiện khả năng sáng tạo bấttậ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

Theo từ điển trực tuyến Wikipedia, Mashup được định nghĩa như một công cụ có

khả năng lấy thông tin từ nhiều nguồn dữ liệu khác nhau nhằm tạo ra một dịch vụ tíchhợp đơn nhất và hoàn toàn mới mẻ Người sử dụng không cần phải am hiểu về kỹ thuật

mà chỉ cần xây dựng dịch vụ dựa trên giao diện lập trình ứng dụng sẵn có như củaGoogle, Amazon, Flickr

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ôinhà đượ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ủacông ty C

Mashup thể hiện rõ đặc trưng của Web 2.0 là "cá nhân hóa thông tin" 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 haidịch vụ YouTube và Flickr Hay người sử dụng có thể "trộn" dữ liệu về tình trạng giaothông ở Hà Nội với Google Maps để lập bản đồ các điểm thường xuyên tắc đường trongthành phố

Mash-up là những công ty cung cấp dịch vụ có khả năng kết hợp các công nghệWeb 2.0 lại với nhau "Ngay khi Google Maps và Google Earth ra đời, nhiều người đãtích hợp công cụ này vào trong dịch vụ của họ và kiếm bộn tiền, chẳng hạn xây dựng bản

đồ những khu vực nhiều tội phạm trong thành phố", Clark nói

Có thể kể tên những mash-up phổ biến là RateItAll.com, nơi người dùng đưa ranhận xét về bất cứ thứ gì họ thích hoặc không thích, và Like.com, cho phép mọi ngườitìm kiếm và so sánh những mặt hàng tương tự thứ họ vừa mua

"Chỉ hai cái đầu và hai chiếc máy tính ở thung lũng Silicon cũng có thể làm được vô

số việc trong một thời gian ngắn Do đó, các nhà đầu tư phải luôn xác định công ty họđịnh rót vốn có những đặc điểm nổi trội so với số đông", chuyên gia đầu tư mạo hiểmPeter Rip nhận xét

Thông thường các dịch vụ web dùng mashup kết hợp bản đồ với nhiều loại dữ liệu

từ nhiều nguồn trên web Trong năm qua, chúng ta đã chứng kiến nhiều site mới nổi đìnhnổi đám, như Zillow.com dự đoán giá bất động sản hay AuctionMapper thể hiện các kếtquả tìm kiếm eBay trên bản đồ để giúp định vị những người bán hàng gần nhất

Nhưng mashup còn có thể làm được nhiều việc hơn là những bản đồ có chú giải chonhững website thông thường Kỹ thuật này cũng có thể áp dụng cho những ứng dụngnghiệp vụ phục vụ hoạt động của doanh nghiệp Vì mashup dựa trên nền tảng kỹ thuậthiện có - JavaScript, XML và DHTML, kết hợp với kết nối Internet tốc độ cao để hỗ trợgiao diện đồ họa và tính năng phong phú - nên không yêu cầu đầu tư nhiều Mashup đang

bắt đầu được xem xét một cách nghiêm túc như là giải pháp cho các vấn đề tích hợp, ứngdụng vốn thường là gánh nặng trước đây.

Cách thức tích hợp linh hoạt này đã được áp dụng trước đây, như các site thươngmại điện tử kết hợp dữ liệu giám sát của UPS hay FedEx (các dịch vụ vận chuyển hànghoá) với thông tin đơn hàng để cung cấp màn hình tổng hợp về tình trạng đơn hàng.Trong môi trường doanh nghiệp, các hãng cung cấp giải pháp portal (cổng thông tin) nhưIBM và Plumtree đã từ lâu cung cấp các công cụ đồ hoạ để cho phép kết hợp các nguồn

dữ liệu một cách dễ dàng, tạo nên các ứng dụng web tùy biến đơn giản

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 - ảnh: 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ề dulịch, nhà hàng

 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 tintứ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ênJavaScript 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ì bạn 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ẫnvớ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ìnhnhư mashup cho thông tin quan trọng"

1.1.4 Mô hình mash up

Seely Brown khẳng định việc thương mại hoá nhanh chóng phần cứng và phần mềmcùng với băng thông rộng sẽ giúp tạo nền tảng cho các dịch vụ tự xây dựng trang webphức tạp hơn Trong khi đó, các trình duyệt ngày càng hiện đại, cho phép các ứng dụngweb có tính tương tác cao hơn và người dùng sẽ quen với việc hoà trộn thông tin từ nhiềunguồn khác nhau để tạo ra các ứng dụng của riêng họ Đó chính là “mash-up” Nhữngcông cụ đang nổi lên như thế sẽ mở đường cho những người dùng tạo ra những trang webphức tạp hơn, trong đó phải kể đến sự bùng nổ của blog, Wikis …

Có rất nhiều cách tiếp cận với ý tưởng cung cấp dịch vụ tự xây dựng trang web Một

số nhà cung cấp đi theo hướng tạo ra những trang web đồng sở hữu – đó là các Wikis.Nhưng cũng có nhà cung cấp lại đi theo hướng đưa các ứng dụng xuất bản web trên máytính để bàn lên web – đó chính là blog hay các trang web cá nhân

Đối lập với các công cụ xuất bản web thế hệ đầu tiên như FrontPage hayDreamweaver, rất nhiều dịch vụ cho phép người dùng tạo ra các ứng dụng trực tiếp từtrình duyệt web và lưu trữ một trang web hoàn thiện trên chính máy chủ của nhà cungcấp dịch vụ Thay vì chỉ đơn giản xuất bản các trang web, một số nhà cung cấp dịch vụ

đã tích hợp các dịch vụ web như YouTube, Flickr hay Amazon.com … cho phép ngườidùng có thể tự tạo ra các mash-up của riêng họ

kết hợp

Một xu hướng Web 2.0 phổ biến hiện nay là mash-up, tức mọi người kết hợp các bộ

dữ liệu khác nhau để tạo nên một dịch vụ hoặc sản phẩm mới Nói đơn giản, mash-uptương tự việc người ta tách bài hát trong các album của các nghệ sỹ ở từng thời kỳ đểchọn ra những ca khúc mà họ hài lòng nhất

Google Maps là nền tảng yêu thích của giới tạo mash-up, như xây dựng bản đồ chứathông tin về tội phạm, về các hộ dân cư hoặc bản đồ thuế

1.2 Một số trang web về du lịch có sử dụng bản đồ trực tuyến

trang web

Tại địa chỉ www.ciren.gov.vn, người truy cập có thể xem được bản đồ giao thông;bản đồ hệ thống các vườn quốc gia, khu bảo tồn, rừng ngập mặn; bản đồ hiện trạng sửdụng đất, quy hoạch đất; thông tin ảnh hàng không và ảnh vệ tinh

Trong cuộc sống, do quá bận rộn với những công việc hằng ngày mà những danhlam thắng cảnh của nước ta ít được các bạn biết đến hoặc chỉ biết vài nơi quen thuộc, nổitiếng mà thôi

Trang Web thangcanhdep.com có giao diện đẹp mắt, bố cục rõ ràng, dễ dàng trongviệc tra cứu và sử dụng Website đang hoạt động với gần 100 khu du lịch, địa điểm, danhlam thắng cảnh của nước ta được sắp xếp theo từng chủ đề, từng chỉ mục như Thắngcảnh, Du lịch biển, Hang động, Vườn quốc gia Hơn thế nữa, các hình ảnh minh họacho những đề mục giống như trong tập Atlas Việt Nam, nên các bạn sẽ không gặp phảinhững khó khăn trong lúc tra cứu

Hình 1: Hình ảnh website có sử dụng bản đồ trực tuyến

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

Ở các trang web trên hầu hết chỉ mang tính giới thiệu về mặt hình ảnh cùa mộtvùng nào đó trên bản đồ trực tuyến, chưa có các đoạn video quảng bá, các đoạn văn mô tảngắn Bên cạnh đó hạn chế về mặt cơ sở dữ liệu như việc giới thiệu hình ảnh về các thànhphố lớn của đất nước Vì thế việc quảng bá hình ảnh của đất nước với thế giới đã phầnnào hạn chế

Cùng với các trang web sử dụng bản đồ trực tuyến, tôi đã xây dựng trang web quản lý

hệ thống thông tin.Trước hết cho phép người dùng có thể xem được thông tin về các thủ

đô gồm diện tích, dân số và một số thông tin liên quan đến thủ đô đó Bên cạnh đó hiểnthị video và hình ảnh về thủ đô đó Đồng thời hiển thị vị trí vĩ độ, kinh độ của thủ đô đótrên bản đồ trực tuyến.Ngoài ra trang web còn cho phép người quản lý có thể nhập dữliệu, chèn thêm dữ liệu, xoá hay sửa đổi dữ liệu khi thông tin thay đổi Ở đây tôi sử dụngcông nghệ ASP.NET trên nền Web 2.0 Tạo cơ sở dữ liệu bằng SQL server 2005 kết hợpvới cơ sở dữ liệu bản đồ Google Map để hiển thị thông tin Trong chương tiếp theo chúng

ta sẽ tìm hiểu kỹ hơn về Google Map API dùng cơ sở dữ liệu của Google Map kết hợpvới cơ sở dữ liệu tự xây dựng

CHƯƠNG 2: GOOGLE MAP API 2.1 Basics (Cơ bản)

Elements

<div id="map_canvas" style="width: 500px; height: 300px"></div>

Để hiện thị bản đồ lên trang web thông thường người ta sử dụng thẻ div và thiết lậpcác yếu tố trong trình duyệt Document Object Model(DOM) Trong ví dụ trên một div

có id là “map_canvas” và đặt kích thước sử dụng các thuộc tính(độ rộng, chiều cao) Cóthể sử dụng GmapOptions xây dựng bản đồ, sử dụng kích thước của những đối tượngchứa trong nó làm kích thước của chính nó

Elementary Object

var map = new GMap2(document.getElementById("map_canvas"));

Bên cạnh đó ta có thể sử dụng lớp JavaScript cung cấp một bản đồ được đặt tênGMAP2 Những đối tượng của lớp này sẽ tạo nên một bản đồ đơn trên web Ta có tạomột trường hợp của lớp này bằng cách sử dụng toán tử new của javascript.

2.1.4 Initializing the Map (Khởi tạo bản đồ)

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Trước khi việc tạo một bản đồ dùng hàm GMap2, cần phải khởi tạo nó Sự khởitạo này được hoàn thành với sự sử dụng hàm setCenter() Phương pháp setCenter() yêucầu một tọa độ GLatLng và mức khung nhìn bản đồ, phương pháp này phải được thực thitrước mọi thao tác khác thực hiện trên bản đồ

the Map(Tải bản đồ)

<body onload="initialize()" onunload="GUnload()">

Để bảo đảm bản đồ của ta chỉ được đặt lên trang sau khi đã tải trang đó từ serverxong, ta thực hiện chức năng xây dựng đối tượng GMap2 <body> Phần tử của trangHTML nhận được một sự kiện onload Vì thế tránh được hành vi không thể đoán trước vàđưa cho chúng ta nhiều điều khiển trên bản đồ

and Longitudes (Vĩ độ và kinh độ)

Bây giờ mà chúng ta có một bản đồ, ta cần một cách thức xác định vị trí trên bản

đồ Đối tượng GLatLng cung cấp một cơ chế như vậy bên trong bản đồ Google API Bạnxây dựng một đối tượng GLatLng, chứa những tham số (của) nó {Vĩ độ, kinh độ}

var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

Chẳng hạn, một bản đồ trình bày một “cửa sổ” hiện thời của toàn bộ thế giới bêntrong cái gì được biết như một viewport Viewport này có thể định nghĩa gần nhữngđiểm hình chữ nhật Đối tượng GLatLngBounds cung cấp chức năng này, định nghĩamột vùng hình chữ nhật sử dụng hai đối tượng GLatLng đại diện cho southwest và nhữnggóc đông bắc

Hình 2: Thêm 10 vị trí đánh dấu khác nhau trên bản đồ

function initialize() {

var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Thêm 10 vị trí đánh dấu ở vị trí khác nhau trên bản đồ

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 < 10; i++) {

var point = new GLatLng(southWest.lat() + latSpan *

 G_NORMAL_MAP : Khung nhìn mặc định

 G_SATELLITE_MAP : hình ảnh từ vệ tinh

 G_HYBRID_MAP : Bản đồ trộn giữa khung nhìn mặc định và khung nhìn từ

vệ tinh

 G_DEFAULT_MAP_TYPES : Một tập hợp gồm 3 loại trên , hữu dụng choviệc xử lý lặp Có thể thiết lập loại bản đồ bằng cách sử dụng phương thứcGMap2 object’s setMapType()

Chẳng hạn, mã sau đây đặt bản đồ để sử dụng hình ảnh vệ tinh từ Google Earth

var map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP);

Bản đồ cũng chứa đựng một số thuộc tính hữu ích cho việc xác nhận Chẳng hạn, đểtìm ra kích thước của khung nhìn hiện tại ta sử dụng phương thức GMap2 object’sgetBounds() pháp để trả lại một giá trị GLatLngBounds Ta có thể phóng to hoặc thu nhỏbản đồ để có những khung nhìn tuỳ ý Ta có thể nhìn toàn bộ thế giới bằng cách thu bản

đồ nhỏ nhất(mức 0) hay phóng to cực đại để có thể nhìn được từng toà nhà riêng rẽ(mức19) trong khung nhìn bình thường Với khung nhìn từ vệ tinh có thể phóng to đến mức20.Bạn có thể khôi phục mức tăng giảm hiện thời đang sử dụng bởi bản đồ bởi việc sửdụng phương thức GMap2 object’s getZoom()

Interactions (Tuỳ biến bản đồ)

Nó cung cấp khả năng tuỳ biến các đối tượng của bản đồ Đối tượng Gmap2 cungcấp 1 số lượng các phương thức cấu hình để thay đổi chính những tác động của đối tượngbản đồ Bạn có thể thay đổi bẳng một số phương thức tiện ích Ví dụ phương thứcGmap2.disableDragging() Huỷ bỏ khả năng kéo thả bản đồ tới vị trí mới

var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);

window.setTimeout(function() {

map.panTo(new GLatLng(37.4569, -122.1569));

}, 1000);

Listeners (Lắng nghe sự kiện)

Các sự kiện trong Google Map API được xử lý bằng các chức năng tiện ích bêntrong name space GEvent để tạo ra 1 đối tượng event listeners Đối tượng này có tác

dụng lắng nghe và bắt sự kiện Ví dụ đối tượng Gmap2 cung cấp các sự kiện “click”,

“double click” và “move” Mõi sự kiện sẽ xảy ra trong các ngữ cảnh khác nhau Khi

người sử dụng di chuyển chuột sự kiện “mouse move” sẽ được thi hành.Phương thức tĩnh

gevent.addListener() được sử dụng để thông báo mỗi khi các sự kiện xảy ra Phương thức

này chỉ ra một đối tượng, một sự kiện được lắng nghe và một hàm được khi sự kiệntương ứng xảy ra Ví dụ dưới đây sẽ đưa ra một thông báo mỗi khi người sử dụng bấmvào bản đồ

Hình 3: Bắt sự kiện khi click vào bản đồ

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

GEvent.addListener(map, "click", function() {

alert("You clicked the map.");

});

Listener có khả năng nắm bắt ngữ cảnh của sự kiện Đoạn code dưới đây sẽ hiển thịkinh độ và vĩ độ của phần trung tâm của bản đồ

var map = new GMap2(document.getElementById("map"));

GEvent.addListener(map, "moveend", function() {

var center = map.getCenter();

Khi thực thi “even listenner” sẽ rất dễ dàng nếu như đối tượng đó có chứa dữ liệu

trong nó Javascipt không hỗ trợ trường hợp dữ liệu đã được đóng gói nhưng nó hỗ trợhàm closure() cho phép các hàm nội tại truy cập đến các biến bên ngoài Các evenlistener() sử dụng hàm này để truy cập các biến thường không nằm trong các đối tượngcủa sự kiện đó Đoạn code dưới đây sử dụng hàm closure() để gán một thông điệp bí mậtvào một tập hợp marker khi bấm vào mỗi marker sẽ hiện thị một phần của thông điệp bímật đó Phần thông điệp này không nằm trong nội tại của marker

Hình 4: Sử dụng Closuress trong lắng nghe sự kiện

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Creates a marker at the given point

// The five markers show a secret message when clicked

// but that message is not within the marker's instance data

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);

});

return marker;

}

// Add 5 markers to the map at random locations

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 *

Passed Arguments in Events (Truyền tham số trong sự kiện)

Ta có thể truyền tham số vào các sự kiện Đoạn code dưới đây, sự kiện “click” trên

bản đồ truyền 2 tham số overlay và point

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// ground overlay

GEvent.addListener(map,"click", function(overlay,point) { var myHtml = "The GPoint value is: " +

map.fromLatLngToDivPixel(point) + " at zoom level " +

Overview (Tổng quan về điều khiển)

Bạn có thể sử dụng một số công cụ có sẵn của Map API trong bản đồ của mình

 GlargeMapControl: Có những nút lớn dùng để di chuyển hình ảnh, phóng

to hoặc thu nhỏ bản đồ

 GSmallMapControl: Có những nút nhỏ dùng để di chuyển hình ảnh, phóng to hoặc thu nhỏ bản đồ

 GsmallZoomControl:

 GscaleControl: có thể Co dãn bản đồ

 GMapTypeControl: Các nút cho phép người sử dụng chuyển đổi giữa cácloại bản đồ

 GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing many map type selectors

 GOverviewMapControl - Một bản đồ tổng quan được xếp lại trong góc của màn ảnh

Tất cả các điều khiển này được dựa vào đối tượng của GControl

Một số kiểu bản đồ:

 G_NORMAL_MAP : Hiển thị ở dạng bình thường, thương là kiểu bản đồ2D của Google Maps

 G_SATELLITE_MAP: Hiển thị hình ảnh chụp từ vệ tinh

 G_HYBRID_MAP : Hiển thị hình ảnh chụp từ vệ tinh kết hợp với những thực thể nổi bật như (đường, tên thành phố.)

 G_PHYSICAL_MAP : Hiển thị bản đồ địa lý dựa vào thông tin địa thế.Theo mặc định, Google Maps API cung cấp 3 loại bản đồ : G_NORMAL_MAP,G_SATELLITE_MAP và G_HYBRID_MAP Bản có thể thay đổi nó qua 2 hàm doGoogle Map cung cấp là GMAP2.removeMapType() hoặc GMAP2.addMapType()

Đoạn code dưới đây loại bỏ kiểu bản đồ G_HYBRID_MAP từ những kiểu bản đồsẵn có Khi ta gọi hàm GmapTypeControl chỉ có 2 kiểu bản đồ G_NORMAL_MAP vàG_SATELLITE được hiển thị

var map = new GMap2(document.getElementById("map_canvas"),

{ size: new GSize(640,320) } );

2.3.2 Adding Controls to the Map(Thêm 1 điều khiển lên bản đồ)

Thêm những điều khiển bản đồ với Gmap2 phương thức addControl().Ví dụ bạnthêm điều khiển lấy toàn cảnh của bản đồ

map.addControl(new GLargeMapControl());

Bạn có thể thêm nhiều điều khiển vào một bản đồ Trong trường hợp này chúng ta

sử dụng các điều khiển có sẵn là GsmallMapControl() và GmapTypeControl() cho phépquyết, phóng to thu nhỏ bản đồ và chuyển đổi giữa 2 kiểu Map và Statellite

Hình 5: Thêm 1 điều khiển lên bản đồ

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

g Controls on the Map(Vị trí điều khiển trên bản đồ)

Phương thức addControl() với tham số thứ 2 tuỳ chọn GcontrolPosition cho phépbạn xác định vị trí của điều khiển trên bản đồ Dưới dây là một số giá trị thích hợp chotham số này

Ví dụ này thêm điều khiển GmapTypeControl vào góc trên bên phải của bản đồ với

độ cách của các chiều là 10 pixel Click dobuble vào mọi chỗ trên bản đồ sẽ chuyển điềukhiển này xuống góc dưới bên phải bản đồ

var map = new GMap2(document.getElementById"map_canvas"));

var mapTypeControl = new GMapTypeControl();

var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new

Ở ví dụ này sẽ vé sẵn 1 lưới bản đồ ở dưới sau đó tạo raGhierarchicalMapTypeControl để sắp xếp các đối tượng bản đồ phủ lên trên.

Hình 6: Sửa chữa và tạo ra những điều khiển chuẩn

// define the crosshair tile layer and its required functionsvar crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);

crossLayer.getTileUrl = function(tile, zoom) {

return "./include/tile_crosshairs.png";

}

crossLayer.isPng = function() {return true;}

// Create a new map type incorporating the tile layer

var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0],

crossLayer ];

var mtTerCross = new GMapType(layerTerCross,

G_PHYSICAL_MAP.getProjection(), "Ter+");

var map = new GMap2(document.getElementById("map_canvas"),

{ size: new GSize(640,320) } );

map.addMapType(G_PHYSICAL_MAP);

map.addMapType(mtTerCross);

map.setCenter(new GLatLng(37.4419, -122.1419), 4);

var mapControl = new GHierarchicalMapTypeControl();

// Set up map type menu relationships

// Add control after you've specified the relationships

map.addControl(mapControl);

map.addControl(new GLargeMapControl());

Map Controls (Điều khiển bản đồ tuỳ chọn)

Google Map API cho phép cung tạo ra các điều khiển bản đồ tuỳ ý bằng lớp conGcontrol Để tạo ra 1 điều khiển khả dụng, bạn phải định nghĩa bộ xử lý cho ít nhât là 2phương thức trong lớp initalize() và getDefaultPostition() Phương thức initalize() phảitrả giá trị DOM element Trong khi phương thức getDefaultPosition() phải trả đối tượng