Đề tài Hệ thống bản đồ trực tuyến sử dụng Google Map Api

MỤC LỤC 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ực tuyế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ên thế 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ực tuyế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 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. Chúng ứng dụng bởi rất nhiều công nghệ khác nhau như .NET, PHP, JSP…Cùng xu hướng đó tôi đã xây dựng một trang web về lĩnh vự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ên nền Web 2.0 kết hợp với Google Map API. GIỚI THIỆU CHUNG Giới thiệu các công nghệ Bản đồ trực tuyến Bả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í ấy có liên quan đến khu vực xung quanh. 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 đồ. Bản đồ trực tuyến Theo Trung tâm Thông tin (CIREN thuộc Bộ Tài nguyên - Môi trường) cơ quan cung cấp DV này: Ngoài việc cung cấp thông tin cho người truy cập, hệ bản đồ này còn có ý nghĩa như là cơ sở dữ liệu quan trọng phục vụ hoạt động của các cơ quan Chính phủ, các cơ quan nghiên cứu khoa học và phục vụ việc phổ cập thông tin cộng đồng.  DV này của CIREN được thiết lập theo đúng tiêu chuẩn OGC WMS. Do vậy, có thể sử dụng bản đồ trực tuyến VN kết hợp với rất nhiều dịch vụ WMS của các tổ chức và quốc gia trên thế giới. CIREN có hướng dẫn phương pháp kết hợp dịch vụ bản đồ trực tuyến VN với nguồn ảnh vệ tinh của Microsoft Virtual Earth và Yahoo Map.  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ế.  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 đặt mộ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 được nhữ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ài liệ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ày hoà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ên gọ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ái ngượ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ên Desktop 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à MediaLive International 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ợp củ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 (trang tin 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ụng chạ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 web sau: Trang web cung cấp dịch vụ chat trực tuyến () cho phép bạn chat thẳng trên nề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ạn soạ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ình bì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ạn thả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ác trang web cá nhân với nội dung tùy thích. Nó cho phép đưa vào các thông tin 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. Công nghệ 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ách mạ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ấ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. 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ích hợ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ủa Google, 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ô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... 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 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ố... 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 ra nhậ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ười tì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ểm Peter 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 đình nổi đám, như Zillow.com dự đoán giá bất động sản hay AuctionMapper thể hiện các kết quả 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 cho những website thông thường. Kỹ thuật này cũng có thể áp dụng cho những ứng dụng nghiệ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ật hiệ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, ứng dụ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ương mạ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àng hoá) 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ề du lị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 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ì 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ẫ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". 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ềm cù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 web phứ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ụng web 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ều nguồn khác nhau để tạo ra các ứng dụng của riêng họ. Đó chính là “mash-up”. Những cô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 web phứ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áy tí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 hay Dreamweaver, 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à cung cấ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ười dùng có thể tự tạo ra các mash-up của riêng họ. Ứng dụng 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-up tươ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ứa thông tin về tội phạm, về các hộ dân cư hoặc bản đồ thuế.... Một số trang web về du lịch có sử dụng bản đồ trực tuyến Giới thiệu 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 danh lam 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ổi tiếng mà thôi. Trang Web thangcanhdep.com có giao diện đẹp mắt, bố cục rõ ràng, dễ dàng trong việ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, danh lam 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ắng cả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ọa cho 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ải nhữ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 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ột vù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ành phố 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ần nà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ển thị 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ụng cô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ợp vớ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ợp với cơ sở dữ liệu tự xây dựng GOOGLE MAP API Basics (Cơ bản) Loading the Google Maps API (Tải Google Map API) Lấy bản đồ từ Google Map bằng cách Truy cập URL nằm trong thẻ javascript sẽ chứa các tất cả các ký tự đặc biệt và các định nghĩa khi bạn cần sử dụng Google Map API. Trang web phải chứa đoạn script sử dụng khoá khi đăng nhập vào sử dụng API . Trong ví dụ này khoá được xem như "abcdefg" . Map DOM Elements Để 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ập cá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ượng chứa trong nó làm kích thước của chính nó. The 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ên GMAP2. 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ạo mộ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. 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ởi tạo này được hoàn thành với sự sử dụng hàm setCenter(). Phương pháp setCenter() yêu cầ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 thi trước mọi thao tác khác thực hiện trên bản đồ. Loading the Map(Tải bản đồ) Để bảo đảm bản đồ của ta chỉ được đặt lên trang sau khi đã tải trang đó từ server xong, ta thực hiện chức năng xây dựng đối tượng GMap2 .Phần tử của trang HTML 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 đồ. Latitudes 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ạn xâ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ên trong 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ĩa một vùng hình chữ nhật sử dụng hai đối tượng GLatLng đại diện cho southwest và những gó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 * Math.random(),        southWest.lng() + lngSpan * Math.random());    map.addOverlay(new GMarker(point));  }} Map Attributes (Thuộc tính bản đồ) Mặc định bản đồ trong Google API sử dụng nền tảng đã được “vẽ” chuẩn.Tuy nhiên, những bản đồ Google API cũng hỗ trợ những kiểu những bản đồ khác. Các loại bản đồ dưới đây là chuẩn 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 cho việ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ức GMap2 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’s getBounds() 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ức 19) trong khung nhìn bình thường. Với khung nhìn từ vệ tinh có thể phóng to đến mức 20.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() Map 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 cung cấ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ượng bản đồ. Bạn có thể thay đổi bẳng một số phương thức tiện ích. Ví dụ phương thức Gmap2.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); Info Windows var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world")); Event (Sự kiện) Event 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ên trong 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ện tươ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ấm và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();  document.getElementById("message").innerHTML = center.toString();});map.setCenter(new GLatLng(37.4419, -122.1419), 13); Using Closures in Event Listeners (Sử dụng Closuress trong lắng nghe sự kiện) 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 even listener() 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ượng củ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ật và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 datafunction 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 = "#" + number + "" + message[number -1];    map.openInfoWindowHtml(point, myHtml);  });  return marker;}// Add 5 markers to the map at random locationsvar 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));} Using 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 overlayGEvent.addListener(map,"click", function(overlay,point) {       var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom();  map.openInfoWindow(point, myHtml);});map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl()); ConTrol(Điều khiển) Controls 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ác loạ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 do Google 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) } );map.removeMapType(G_HYBRID_MAP);map.setCenter(new GLatLng(42.366662,-71.106262), 11);var mapControl = new GMapTypeControl();map.addControl(mapControl);map.addControl(new GLargeMapControl()); 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ạn thê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ép quyế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); Positioning 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ép bạ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 cho tham số này G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT Nếu như không sử dụng các giá trị này thì Map API sẽ sử dụng vị trị mặc định được xác định bởi điều khiển đó. GcontrolPosition có thể xác định offset có thể chỉ ra bao nhiêu pixel từ các chiều của bản đồ tới vị trí của điều khiển. Offset này được xác định bởi đối tượng Gsize. 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ều khiể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 GSize(10,10));var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));map.addControl(mapTypeControl, topRight);GEvent.addListener(map, "dblclick", function() {  map.removeControl(mapTypeControl);  map.addControl(new GMapTypeControl(), bottomRight);});map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13); Modifying the Makeup of Standard Controls (Sửa chữa và tạo ra những điều khiển chuẩn) Hầu hết các điều khiển trong Google Map API chứa những phương thức xử lý chuẩn. Tuy nhiên một số điều khiển đòi hỏi khởi tạo cho mục đích sử dụng thích hợp. Ví dụ điều khiển GhierarchicalMapTypeConTrol yêu cầu 1 số hàm khởi tạo để hiện thị các loại bản đồ bên trong “menu” với một trình tự thích hợp Ở ví dụ này sẽ vé sẵn 1 lưới bản đồ ở dưới sau đó tạo ra GhierarchicalMapTypeControl để 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 layervar 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 relationshipsmapControl.clearRelationships();mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");// Add control after you've specified the relationshipsmap.addControl(mapControl);map.addControl(new GLargeMapControl()); Custom 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 con Gcontrol. Để 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à 2 phương thức trong lớp initalize() và getDefaultPostition(). Phương thức initalize() phải trả giá trị DOM element. Trong khi phương thức getDefaultPosition() phải trả đối tượng có kiểu GcontrolPosition Trong ví dụ này ta tạo ra một điều khiển căn chỉnh kích thước đơn giản sử dụng các link ký tự chứ ko dùng các biểu tượng đồ hoạ giống như trong Google Map Hình 7: Điều khiển bản đồ tuỳ chọn function TextualZoomControl() {}// To "subclass" the GControl, we set the prototype object to// an instance of the GControl objectTextualZoomControl.prototype = new GControl();// Creates a one DIV for each of the buttons and places them in a container// DIV which is returned as our control element. We add the control to// to the map container and return the element for the map class to// position properly.TextualZoomControl.prototype.initialize = function(map) {  var container = document.createElement("div");  var zoomInDiv = document.createElement("div");  this.setButtonStyle_(zoomInDiv);  container.appendChild(zoomInDiv);  zoomInDiv.appendChild(document.createTextNode("Zoom In"));  GEvent.addDomListener(zoomInDiv, "click", function() {    map.zoomIn();  });  var zoomOutDiv = document.createElement("div");  this.setButtonStyle_(zoomOutDiv);  container.appendChild(zoomOutDiv);  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));  GEvent.addDomListener(zoomOutDiv, "click", function() {    map.zoomOut();  });  map.getContainer().appendChild(container);  return container;}// By default, the control will appear in the top left corner of the// map with 7 pixels of padding.TextualZoomControl.prototype.getDefaultPosition = function() {  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));}// Sets the proper CSS for the given button element.TextualZoomControl.prototype.setButtonStyle_ = function(button) {  button.style.textDecoration = "underline";  button.style.color = "#0000cc";  button.style.backgroundColor = "white";  button.style.font = "small Arial";  button.style.border = "1px solid black";  button.style.padding = "2px";  button.style.marginBottom = "3px";  button.style.textAlign = "center";  button.style.width = "6em";  button.style.cursor = "pointer";}var map = new GMap2(document.getElementById("map"));map.addControl(new TextualZoomControl());map.setCenter(new GLatLng(37.441944, -122.141944), 13); Overlays(Phủ trên bản đồ) Map Overlays Overview(Tổng quan về việc phủ trên bản đồ) Hàm Overlay của Map Api có các kiểu sau : Các điểm trên bản đồ hiển thị khi ta sử dụng marker() và thường là hiển thị các biểu tượng. Marker là đối tượng của Gmaker() và được tạo khi sử dụng Gicon(). Các đoạn thẳng trên Gmap được hiển thị khi sử dụng polylines. Đoạn thẳng là đối tượng của Gpolyline(). Markers(Đánh dấu) Marker xác định các điểm trên bản đồ. Mặc định, marker được thể hiện bằng một biểu tượng là G_DEFAULT_ICON. Tuy nhiên, biểu tượng này có thể thay đổi. Hàm khởi tạo Gmarker sử dụng các đối tượng GlatLng và GmarkerOptions làm tham số. Marker là một đối tượng có thể tương tác được với các sự kiện. Ví dụ, ta có thể sử dụng sự kiện click chuột vào marker để hiển thị cửa số thông tin về vị trí hiện tại trên bản đồ. Hình 8: Đánh dấu 10 vị trí lên bản đồ var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Add 10 markers to the map at random locationsvar 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 * Math.random(),        southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));} Draggable Markers (Di chuyển đánh dấu) Marker là đối tượng có thể tương tác và bấm hay di chuyển sang vị trí mới. Trong ví dụ dưới đây, ta sẽ đặt một marker trên bản đồ và xem cách xử lý một số sự kiện đơn giản của nó. Marker có thể di chuyển thực thi 4 loại sự kiện: click, dragstart, drag và dragend để chỉ ra trạng thái di chuyển của nó. Mặc định, các marker chỉ có thể click được chứ không di chuyển được, do vậy cần phải thiết đặt giá trị cho thuộc tính draggable là true. Hình 9: Di chuyển đánh dấu var map = new GMap2(document.getElementById("map_canvas"));var center = new GLatLng(37.4419, -122.1419);map.setCenter(center, 13);var marker = new GMarker(center, {draggable: true});GEvent.addListener(marker, "dragstart", function() {  map.closeInfoWindow();  });GEvent.addListener(marker, "dragend", function() {  marker.openInfoWindowHtml("Just bouncing along...");  });map.addOverlay(marker); Icons (Biểu tượng) Marker có thể tự định nghĩa ra một biểu tượng riêng thay thế cho biểu tượng mặc định. Định nghĩa ra một biểu tượng là việc rất phức tạp vì số lượng ảnh để tạo ra một biểu tượng đơn là khác nhau trong Map API. Tối thiểu, một biểu tượng cần phải xác định ra ảnh nền, kích thước của kiểu Gsize và offset của biểu tượng để xác định vị trí biểu tượng. Các biểu tượng đơn giản nhất đều dựa trên kiểu G_DEFAULT_ICON. Tạo ra một biểu tượng dựa trên kiểu này cho phép bạn thay đổi nhanh chóng biểu tượng mặc định bằng cách chỉ thay đổi một số ít các thuộc tính. Trong ví dụ dưới đây, ta tạo ra một biểu tượng sử dụng kiểu G_DEFAULT_ICON và sau đó sửa lại bằng cách sử dụng một hình ảnh khác var map = new GMap2(document.getElementById("map_canvas"));map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// Create our "tiny" marker iconvar blueIcon = new GIcon(G_DEFAULT_ICON);blueIcon.image = "";                // Set up our GMarkerOptions objectmarkerOptions = { icon:blueIcon };// Add 10 markers to the map at random locationsvar 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 * Math.random(),    southWest.lng() + lngSpan * Math.random());  map.addOverlay(new GMarker(point, markerOptions));} Hầu hết các biểu tượng chứa một ảnh nền và một ảnh bóng. Ảnh bóng được tạo ra lệch 45 độ so với ảnh nền, góc dưới bên trái của ảnh bóng thẳng hàng với góc dưới bên trái của ảnh nền của biểu tượng. Ảnh bóng thường là ảnh 24 bit PNG với độ trong suốt alpha. Nhờ đó mà đường viền hình ảnh sẽ xuất hiện một cách chính xác trên bản đồ. Ví dụ dưới đây tạo ra một kiểu biểu tượng mới. Ta xác định ảnh nền, ảnh bóng và các điểm mà ta sẽ đặt biểu tượng vào bản đồ đồng thời xác định cả vị trí cửa sổ thông tin đi kèm theo biểu tượng. Hình 10: Biểu tượng var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// Create our "tiny" marker iconvar tinyIcon = new GIcon();tinyIcon.image = "";tinyIcon.shadow = "";tinyIcon.iconSize = new GSize(12, 20);tinyIcon.shadowSize = new GSize(22, 20);tinyIcon.iconAnchor = new GPoint(6, 20);tinyIcon.infoWindowAnchor = new GPoint(5, 1);// Set up our GMarkerOptions object literalmarkerOptions = { icon:tinyIcon };// Add 10 markers to the map at random locationsvar 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 * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(new GMarker(point, markerOptions));} Chương 2 đã giới thiệu về API do google map cung cấp và các cách thức sử dụng nó.Google map API được sử dụng rộng rãi trong các trang web làm về lĩnh vực bản đồ và tôi đã sử dụng công nghệ Google Map API trong bài toán của mình kết hợp với công nghệ ASP.NET trên nền web 2.0. Dưới đây, tôi sẽ mô tả chi tiết hệ thống bản đồ với chức năng tra cứu đơn giản về thủ đô của các nước, kèm theo những đoạn giới thiệu ngắn về chúng. HỆ THỐNG BẢN ĐỒ TRỰC TUYẾN SỬ DỤNG GOOGLE MAP API Các công nghệ đã sử dụng Sơ lược về .Net FrameWork Mọi chức năng ASP.NET có được hoàn toàn dựa vào .NET framework, do đó có chữ .NET trong ASP.NET. Ta cần phải hiểu thấu đáo kiến trúc hạ tầng của .NET framework để dùng ASP.NET một cách hiệu quả, trong đó quan trọng nhất là CLR và .NET Framework Class.CLR (COMMON LANGUAGE RUNTIME) CLR là môi trường được dùng để quản lý sự thi hành các nguồn mã (manage the execution of code) mà ta đã soạn ra và biên dịch (write and compile code) trong các ứng dụng. Tuy nhiên khi biên dịch nguồn mã, ta lại biên dịch chúng ra thành một ngôn ngữ trung gian gọi là Microsoft Intermediate Language (MSIL). Chính MSIL trung gian này là ngôn ngữ chung cho tất cả các ngôn ngữ .NET hiện có, do đó chắc bạn cũng đoán ra là ASP.NET cũng được biên dịch (compile) ra MSIL như mọi ai khác. Trong khi biên dịch như vậy, các ứng dụng cũng sản xuất ra những thông tin cần thiết để tự ... quảng cáo chính mình, ta gọi những thông tin này là metadata. Ðến khi ta chạy một ứng dụng, CLR sẽ tiếp quản (take-over) và lại biên dịch (compile) nguồn mã một lần nữa ra thành ngôn ngữ gốc (native language) của máy vi tính trước khi thi hành những công tác đã được bố trí trong nguồn mã đó. Ta có thể cảm thấy những việc bận rộn sau hậu trường đó khi phải chờ đợi 1 khoãng thời gian cần thiết để CLR chấm dứt nhiệm vụ của nó khi lần đầu phải biên dịch (compile) và hiển thị 1 trang Web, nhưng rồi mọi chuyện sẽ xuôi chèo mát mái, cuối cùng là ta có một trình biên dịch (compiled code) để xử dụng rất hiệu quả.NET FRAMEWORK CLASSES Ðiều quan trọng nhất mà ta cần phải nhớ là mọi thứ trong .NET đều là object, tỷ như các trang ASP.NET, các hộp thông điệp (message box) hay là nút bấm (button), tất cả đều là object cả. Các object đó được tổ chức lại thành từng nhóm riêng biệt như trong một thư viện để ta dễ dàng xữ dụng. Ta gọi các nhóm như vậy là namespaces, và ta sẽ dùng những namespace này để gọi hay nhập (import) các class cần thiết cho ứng dụng của mình. Công Nghệ ASP.NET 3.1.2.1 . Giới thiệu về ASP.NET Trước hết, họ tên của ASP.NET là Active Server Pages .NET (.NET ở đây là .NET framework). Nói đơn giản, ngắn và gọn thì ASP.NET là một công nghệ có tính cách mạng dùng để phát triển các ứng dụng về mạng hiện nay cũng như trong tương lai (ASP.NET is a revolutionary technology for developing web applications). Bạn lưu ý ở chổ ASP.NET là một phương pháp tổ chức hay khung tổ chức (framework) để thiết lập các ứng dụng hết sức hùng mạnh cho mạng dựa trên CLR (Common Language Runtime) chứ không phải là một ngôn ngữ lập trình. Ngôn ngữ lập trình được thường dùng để diển đạt ASP.NET là VB.NET (Visual Basic .NET) và VB.NET chỉ là một trong 25 ngôn ngữ .NET hiện nay được dùng để phát triển các trang ASP.NET mà thôi. Tuy mang họ tên gần giống như ASP cổ điển nhưng ASP.NET không phải là ASP. Ta sơ lược ở đây vài khác biệt giữa ASP.NET và ASP để bạn có khái niệm tổng quát và sẽ trình bày thêm chi tiết khi đào sâu vào từng điểm đặc trưng (features) của 3.1.2.2. Sự khác nhau của ASP.NET và ASP ASP.NET.ASP.NET đối với lập trình trên Webserver cũng giống như VB6 đối với lập trình cho desktop. ASP.NET là hậu thân của ASP, tức là ta có thể dùng nó để lập trình trên Webserver thay gì dùng cgi-perl hay php. Về System Architecture thì ASP.NET nằm trên .NET Framework nên nó tận dụng tất cả những chức năng Đối tượng, Cross Language Inheritance ... ASP.NET được phác thảo (re-design) lại từ số không, nó được thay đổi tận gốc rễ và phát triển (develop) phù hợp với yêu cầu hiện nay cũng như vạch một hướng đi vững chắc cho tương lai Tin Học. Lý do chính là Microsoft đã quá chán nãn trong việc thêm thắt và kết hợp các công dụng mới vào các kiểu mẫu lập trình hay thiết kế mạng theo kiểu cổ điển nên Microsoft nghĩ rằng tốt nhất là làm lại một kiểu mẫu hoàn toàn mới thay vì vá víu chổ này chổ nọ vào ASP. Ðó là chưa kể đến nhiều phát minh mới ra đời sau này dựa trên các khái niệm mới mẽ theo xu hướng phát triển hiện nay của công nghệ Tin Học (Information Technology) cần được đưa vào kiểu mẫu phát triển mới đó. Nhờ vậy, ta mới có thể nói ... khơi khơi ASP.NET không phải là ASP. Thật vậy , ASP.NET cung cấp một phương pháp hoàn toàn khác biệt với phương pháp của ASP. Mô tả bài toán Mô tả bằng lời Một trang web có chức năng : Tìm kiếm thủ đô trên bản đồ trực tuyến đồng thời hiển thị thông tin gồm : video, hình ảnh và thông tin text. Trong đó thông tin text được chưa làm 3 phần địa lý, dân số, thông tin khác. Trong phần địa lý hiển thị thông tin về vùng của thủ đô đó, diện tích và số bang hoặc số quận huyện. Trong phần dân số hiển thị số dân, mật độ và dân tộc của thủ đô đó. Còn trong phần thông tin khác hiển thị mã số điện thoại, mã số bưu chính, mã số ISO và mã số xe. Đồng thời với người quản lý trang web có thể nhập thêm những thông tin mới về thủ đô nào đó, có thể chèn thêm thông tin cũng như xoá hoặc sửa thông tin về một thủ đô. Các hồ sơ dữ liệu Thông tin tài khoản User Password Thông tin thủ đô Địa lý Dân số Thông tin khác Video Thiết lập biểu đồ ngữ cảnh Thiết lập biểu đồ ngữ cảnh Biểu đồ phân rã chức năng Mô tả chi tiết các chức năng lá Đăng nhập: Khi người sử dụng thực hiện việc nhập user, password và gửi cho hệ thống, hệ thống sẽ kiểm tra tính xác thực và cấp quyền cho người sử dụng hệ thống Thao tác thực hiện : Đối với người quản lý hệ thống cho phép có thể nhập thêm, chèn thông tin, xoá dữ liệu hay sửa thông tin . Sau đó hệ thống sẽ cập nhật các thao tác thực hiện để tác động lên cơ sở dữ liệu, đồng thời thay đổi cơ sở dữ liệu theo ý của người quản lý. Chức năng này không cấp quyền cho người sử dụng. Tìm kiếm thông tin : Người sử dụng có thể xem thông tin về thủ đô như về phần địa lý, phần dân số, phần thông tin , video về thủ đô đó. Liệt kê hồ sơ sử dụng Tài khoản Thủ đô Địa lý Dân số Thông tin khác Video Lập ma trận thực thể - chức năng Các thực thể a.Tài khoản b. Thủ đô c. Địa lý d. Dân số e.Thông tin khác f. Video Các chức năng nghiệp vụ a b c d e f Đăng nhập R Cập nhật U U U U U Tìm kiếm R R R R R Biểu đồ luồng dữ liệu Biểu đồ luồn dữ liệu mức 0 Mô hình dữ liệu : Mô hình E-R Bước 1 : Liệt kê chính xác và chọn lọc thô Tài khoản 1 2 3 User V Password V Thông tin thủ đô 1 2 3 Mã thủ đô V Tên thủ đô V Tên quốc gia V Địa Lý V Mã thủ đô V Vùng V Diện tích V Số quận/huyện V Dân số V Mã thủ đô V Dân số V Mật độ V Dân tộc V Thông tin khác V Mã thủ đô V Mã điện thoại V Mã bưu chính V Mã ISO V Mã số xe V Video V Mã thủ đô V Link video V Bước 2 : Xác định thực thể và thuộc tính Tài khoản(user, password) Thu dô(ma_thu_do, ten_thu_do, ten_quoc_gia); Địa lý(ma_thu_do, vung, dien_tich, so_quan_huyen); Dân số(ma_thu_do, so_dan, mat_do, dan_toc); Thông tin khác(ma_thu_do, ma_dienthoai, ma_buuchinh, ma_iso, bang_so_xe); Video(ma_thu_do, link video) Chuyển mô hình E-R sang mô hình quan hệ Thiết kế cơ sở dữ liệu vật lý Table : Tài khoản Thuộc tính Kiểu dữ liệu Cỡ Khoá User Nvarchar() 50 Khoá chính Password Navarchar() 50 Table: Thủ đô Thuộc tính Kiểu dữ liệu Cỡ Khoá Mã thủ đô Nvarchar() 50 Khoá chính Tên thủ đô Navarchar() 50 Tên quốc gia Numeric() 10 Table : Địa lý Thuộc tính Kiểu dữ liệu Cỡ Khoá Mã thủ đô Nvarchar() 50 Khoá chính Vùng Navarchar() 50 Diện tích Numeric() 10 Số Quận Huyện Numerice() 3 Table : Dân số Thuộc tính Kiểu dữ liệu Cỡ Khoá Mã thủ đô Nvarchar() 50 Khoá chính Dân số Numeric() 10 Mật độ Numeric() 10 Dân tộc Nvarchar() 50 Table : Thông tin khác Thuộc tính Kiểu dữ liệu Cỡ Khoá Mã thủ đô Nvarchar() 50 Khoá chính Mã điện thoại Numeric() 2 Mã Bưu Chính Numeric() 2 Mã ISO Nvarchar() 50 Bảng số xe Nvarchar() 50 Table : Video Thuộc tính Kiểu dữ liệu Cỡ Khoá Mã thủ đô Nvarchar() 50 Khoá chính Mã điện thoại Numeric() 2 Thiết kế về mặt giao diện Với người dùng Chỉ có một nut để xem thông tin về thủ đô Hình 11: Nút xem thông tin Trong đó bên trái gồm danh sách các thủ đô của các nước Hình 12: Danh sách thủ đô các nước Sau khi lựa chọn thủ đô mình muốn xem thông tin và người dùng click vào xem thông tin thì sẽ hiện thị bản đồ trực tuyến, video, hình ảnh về thủ đô đó Trước hết là video, vĩ độ là kinh độ về thủ đô đó Hình 13: Thông tin về video, kinh vĩ độ trên bản đồ trực tuyến Một số hình ảnh về thủ đô Hình 14: Một số hình ảnh Với người quản lý Các nút nhập, xóa, sửa, xem thông tin khi thông tin về bản đồ thay đổi Hình 15: Các nút nhập, xoá, sửa, cập nhật thông tin Với nút nhập thông tin thì khi người quản lý chọn 1 thủ đô và click vào xem thông tin sẽ hiện thị ra video, hình ảnh và đoạn ngắn mô tả về thủ đô đó Khi người quản lý click vào nhập thông tin sẽ hiện ra Hình 16: Ô nhập thông tin Sau khi người quản lý click và button “kiem tra va nhap tiep” thì hệ thống sẽ kiểm tra thủ đô đó có tồn tại thủ đô đó hay không ?Nếu tồn tại hiện ra form nhập dữ liệu cho thủ đô đó. Hình 17: Nhập các thông tin Với nút xoá thông tin Hình 18: Xoá thủ đô Sau khi người quản lý click và button “kiem tra va cap nhat” thì hệ thống sẽ kiểm tra thủ đô đó có tồn tại thủ đô đó hay không ?Nếu tồn tại sẽ xoá thủ đô đó khỏi cơ sở dữ liệu Với nút cập nhật thông tin Sau khi người quản lý click và button “kiem tra va cap nhat” thì hệ thống sẽ kiểm tra thủ đô đó có tồn tại thủ đô đó hay không ?Nếu tồn tại hiện ra form cập nhật dữ liệu cho thủ đô đó có giao diện giống hình 17. TỔNG KẾT Tóm lại, khóa luận đã cung cấp những kiến thức cơ bản về bản đồ trực tuyến, các công nghệ hỗ trợ như Web 2.0, ASP.NET và Google Map API. Cụ thể, khóa luận gồm những phần sau: Khái niệm về bản đồ trực tuyến, công nghệ Web 2.0, ASP.NET, công nghệ mash up. Tổng quan về Google Map API Xây dựng một hệ thống bản đồ gồm các chức năng xem thông tin, nhập thông tin, xoá thông tin cũng như sửa thông tin đối với cơ sở dữ liệu thủ đô. Hiển thị được video, hình ảnh và đoạn ngắn mô tả như địa lý, dân số và một số thông tin khác liên quan tới thủ đô. trên nền Web 2.0 với công nghệ ASP.NET, sử dụng Google Map API. Do hạn chế về mặt thời gian cũng như kiến thức, khóa luận còn nhiều sai sót và thiếu chi tiết, rất mong được sự đóng góp của các thầy/ cô và các bạn để cuốn luận văn được hoàn thiện hơn. Hướng phát triển của đề tài: Xây dựng trang web hoàn thiện hơn về mặt giao diện cũng như chức năng. Có thể kiểm soát được lỗi và sửa lỗi khi người dùng hoặc người quản lý trang web có những thao tác sai đối với cơ sở dữ liệu. Trước hết tiến tới xây dựng cảnh đẹp của các thành phố cũng như thắng cảnh đẹp của các địa danh nổi tiếng Việt Nam để giới thiệu với bạn bè quốc tế. Xây dựng được một cơ sở dữ liệu hoàn chỉnh với nhiều thông tin và dữ liệu về bản đồ.