Khóa luận Dịch vụ thông tin bất động sản trên bản đồ trực tuyến

h ứng dụng sẵn có như của Google, Amazon, Flickr... Hình 1: Mô hình ứng dụng mashup. Mashup được phân làm bốn loại tiêu biểu : 10 • 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ố... [14]. 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. 11 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 [17]. 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. Một số khảo sát gần đây cho thấy, trong các nội dung trên của mashup, các ứng dụng mashup cho tiện ích bản đồ chiếm tỉ lệ lớn nhất, bằng một nửa so với các nội dung còn lại. 12 Hình 2. Tỉ lệ ứng dụng các tiện ích của mashup 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". Vì thế, khi tạo các ứng dụng dựa trên mashup cần tham khảo một số quy tắc sau: • Dùng các nguồn dữ liệu bên ngoài có giấy phép để tránh những quảng cáo không mong muốn; với các nguồn miễn phí, cần nắm rõ các điều khoản thỏa thuận sử dụng. • Tạo thư mục các nguồn dữ liệu nội bộ dạng XML và RSS để cung cấp cho những người phát triển mashup trong bộ phận CNTT cũng như ở các bộ phận nghiệp vụ khác. 13 • Sử dụng mashup như là tùy chọn tích hợp cho các công việc thông thường như giám sát tình trạng đơn hàng với các đối tác bên ngoài. • Các công cụ mashup vẫn còn trong giai đoạn phát triển, hãy tìm công cụ tốt nhất đáp ứng nhu cầu hiện tại của bạn nhưng vẫn tiếp tục xem xét những công cụ mới. • Phát triển và bắt buộc tuân thủ các chính sách sử dụng mashup nhưng đừng quá cứng nhắc, nếu không bạn sẽ thủ tiêu mục đích của việc phát triển linh hoạt. 1.4. Housingmaps - một website điển hình sử dụng công nghệ mashup Houingmaps( một website thông tin bất động sản ở Mỹ là sự kết hợp hoàn hảo giữa Google Maps và Craigslist cung cấp cho người sử dụng một cách trực quan nhất các thông tin về bất động sản . Nếu như Google Maps là website cung cấp các API cho giải pháp bản đồ trực tuyến thì Craigslist là website giao vặt nổi tiếng được chấp nhận ở nhiều nơi trên thế giới.Với Housingmaps người sử dụng có thể dễ dàng tìm thấy các căn hộ họ cần đồng thời xác định được chính xác vị trí của các căn hộ đó trên bản đồ. Giao diện của Housingmaps tương đối đơn giản, chúng ta không phải mất quá nhiều thời gian cho việc sử dụng nó. Housingmaps có tất cả các tính năng của cả Google Maps cũng như Craigslist. Chúng ta có thể dễ dàng di chuyển xung quanh bản đồ đến vị trí mong muốn bằng cách sử dụng con trỏ hướng trên bản đồ, có thể phóng to, thu nhỏ bản đồ. Housingmaps còn có các biểu tượng (icon) để xác định các danh sách đối tượng của Craigslist. Những biểu tượng màu xanh đại diện cho các thành phố, khi người dùng nhấn chuột chọn sẽ cho danh sách các căn hộ có nhu cầu bán và cho thuê trong phạm vi thành phố. Biểu tượng màu đỏ và vàng đại diện cho các căn hộ, với biểu tượng màu vàng thì căn hộ đó có kèm theo ảnh quảng bá của mình. Housingmaps còn có các tính năng của Craigslist, cho phép người dùng sử dụng tính năng lọc kết quả theo vị trí căn hộ, giá cả, số lượng phòng của căn hộ … Đây là tính năng nổi trội của Housingmaps, cung cấp tiện ích lớn cho người dùng. Danh sách các căn hộ của Craigslist nằm ở phía bên phải của bản đồ, bằng 14 một nhấp chuột, ta có thể có tất cả thông tin chi tiết theo danh sách trả về của Craigslist. Housingmaps rất hữu dụng, đặc biệt khi chúng ta chuyển đến một thành phố khác, rất dễ dàng ta có thể xác định được căn hộ phù hợp với nhu cầu của mình. Tuy nhiên, hạn chế của Housingmaps lại nằm ở chính ưu điểm của nó. Giao diện của Housingmaps tương đối đơn giản, dễ sử dụng nên không cung cấp được thông tin đầy đủ cho người dùng. Một điểm hạn chế khác của Housingmaps đó là nó chỉ cung cấp thông tin cho khoảng 40 thành phố ở Mỹ, trong khi nhu cầu tại các thành phố lớn khác cũng rất cần thiết. Những điểm hạn chế này lại là ưu thế của Mapskrieg- đối thủ mới và rất tiềm tàng của Housingmaps [4]. 1.5. Đôi nét về hệ thống cần xây dựng Qua phân tích một số ưu điểm cũng như hạn chế của các website trên, luận văn hướng tới việc xây dựng một hệ thống thông tin bất động sản tận dụng được những ưu điểm của các website đó, đồng thời giải quyết được một số mặt hạn chế đã phân tích ở trên.. Hệ thống chúng ta xây dựng, trước hết sẽ có giao diện gần giống với Housingmaps, tương đối đơn giản, dễ sử dụng, khả năng đáp ứng nhu cầu cao, có thêm các chức năng tìm kiếm, lọc thông tin phù hợp với nhu cầu của người sử dụng. Hệ thống sẽ bổ sung thêm chức năng tìm kiếm trong một phạm vi bán kính nhất định, hướng đến việc cập nhật thông tin mới và loại bỏ những thông tin cũ, không còn giá trị. Việc loại bỏ thông tin cũ không phải là loại bỏ hoàn toàn, mà là loại bỏ có sử dụng lại cho các mục đích khác, chẳng hạn như thống kê thông tin. 15 CHƯƠNG 2. GOOGLE MAPS VÀ GOOGLE MAP API Thời gian gần đây, chúng ta đã khá quen thuộc với các khái niệm về Google Maps và Google Map API. Nhưng cụ thể, Google Maps là gì? Google Map API cung cấp những gì? Trong chương này chúng ta sẽ cùng tìm hiểu về Google Maps và Google Map API. 2.1. Google Maps Google Maps là một dịch vụ của Google, cung cấp các ứng dụng và cộng nghệ hoàn toàn miễn phí về dịch vụ bản đồ trên web, bao gồm Google Maps website (website về Google Maps), Google Ride Finder (cho phép người lái xe xác định được vị trí và hướng, cách thức để đi đến đích), các bản đồ nhúng trên các website thông qua Google Map API…Với Google Maps, người sử dụng có thể có nhiều tính năng tiện ích như : • Kết hợp thông tin của các kết quả tìm kiếm về cùng một địa điểm như vị trí, thông tin liên lạc, bình luận … Chẳng hạn, khi ta gõ truy vấn [ pizza in San Jose, CA ], kết quả trả về sẽ là một danh sách vị trí, thông tin liên lạc, hay giờ mở cửa, hình thức thanh toán, … của các nhà hàng. • Người dùng có thể nhấp chuột và di chuyển bản đồ để hiển thị sang vùng lân cận mà không cần phải đợi bản đồ nạp lại vùng đó. • Google Maps còn có các chế độ hiển thị như Satellite, Terrain, … tùy vào mục đích người dùng. • Cũng giống như các dịch vụ bản đồ trực tuyến khác, Google Maps cung cấp cơ chế Google Maps driving directions đưa ra đường đi giữa hai địa điểm bất kỳ thuộc cùng quốc gia hay giữa hai quốc gia trên thế giới, sẽ có nhiều đường đi khác nhau, mỗi đường đi sẽ có chi tiết về hành trình cho người dùng lựa chọn. 16 • Google Maps cho phép các tương tác với bàn phím, giúp người dùng dễ dàng hơn trong việc sử dụng. Người dùng chỉ đơn giản sử dụng các phím Page Up, Page Down, Home và End để dịch chuyển bản đồ, điều chỉnh độ Zoom bằng các phím +, -. • Ngoài ra, thay vì bàn phím, người dùng có thể sử dụng chuột, điều chỉnh Zoom bằng cách kích đúp chuột trái và phải, dịch chuyển bằng cách giữ chuột trái và kéo … 2.2. Google Map API Cùng với Google Maps, Google đã tạo ra Google Map API giúp những người phát triển dễ dàng tích hợp Google Maps vào các website kết hợp với dữ liệu của họ. Sử dụng Google Map API, chúng ta có thể dễ dàng nhúng toàn bộ Google Maps vào trong website của mình. Để sử dụng các API này, rất đơn giản, trước tiên chúng ta cần đăng ký một khóa API. Khi đã nhận được khóa API, chúng ta có thể phát triển các ứng dụng bản đồ trực tuyến dựa vào những kiến thức nền tảng về đối tượng, sự kiện, điều khiển … của Google Map API. 2.2.1. Map Basics Phần tử cơ sở trong bất kỳ ứng dụng nào của Google Map API, là các đối tượng bản đồ (map object) của nó. Để tạo các ứng dụng loại này, chúng ta cần biết cách khởi tạo các map object, thiết lập kích thước, thuộc tính cho chúng. Để bắt đầu chúng ta cùng xét ví dụ khá đơn giản sau đây. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" ""> Google Maps JavaScript API Example 17 <script src= type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } Trong ví dụ này, để sử dụng các API của Google Maps, trước tiên chúng ta phải nạp các API này, bằng cách sử dụng thẻ script : <script src= type="text/javascript"> Để bản đồ hiển thị được trên trang web, chúng ta cần phải chuẩn bị trước cho nó một vị trí để hiển thị. Việc này được thực hiện bằng cách tạo một phần tử div và giữ một tham chiếu đến phần tử này trên DOM. 18 Ví dụ này tạo một phần tử div có tên là “map_canvas”, thiết lập kích thước bằng cách sử dụng thuộc tính style. Trong trường hợp kích thước của bản đồ không được chỉ định qua thuộc tính GMapOptions trong hàm tạo, kích thước bản đồ sẽ là kích thước của phần tử chứa nó. Khi đã có phần tử div này, chúng ta sử dụng JavaScript để tạo map object var map = new GMap2(document.getElementById("map_canvas")); GMap2 là một lớp trong JavaScript đại diện cho lớp đối tượng bản đồ. Các đối tượng của GMap2 định nghĩa một bản đồ trên trang web. Chúng ta có thể tạo nhiều thể hiện của lớp, tức là có thể có nhiều bản đồ trên cùng một trang web. Việc tạo một thể hiện mới của GMap2 sử dụng toán tử new của JavaScript. Mỗi khi tạo ra một map object, chúng ta chỉ định cho nó một DOM node trên trang web (thường là một phần tử div) như là một container chứa đựng nó. Các HTML node là các lớp con của đối tượng document trong JavaScript, ta nhận được tham chiếu của nó qua phương thức document.getElementById(). Sau khi đã có một map object, việc tiếp theo cần làm là khởi tạo nó thông qua phương thức setCenter(). Phương thức này yêu cầu môt tọa độ GLatLng (bao gồm kinh độ và vĩ độ), một zoom level và phải được thực hiện trước tất cả các thao tác khác trên map object. map.setCenter(new GLatLng(37.4419, -122.1419), 13); Với một trang HTML, một DOM có thể được nạp thêm nhiều đối tượng khác như các ảnh, các kịch bản … Để đảm bảo rằng bản đồ của ta được nạp lên sau cùng, chúng ta chỉ thực hiện việc gọi hàm tạo các đối tượng GMap2 một lần trong thẻ body Tương tự như Google Maps, các map object cũng được Google Map API cung cấp các map type khác nhau, các map type chuẩn bao gồm : • G_NORMAL_MAP - kiểu hiển thị mặc định. • G_SATELLITE_MAP - hiển thị theo kiểu ảnh vệ tinh. 19 • G_HYBRID_MAP – hiển thị kết hợp giữa nomal và satellite. • G_DEFAULT_MAP_TYPES – một mảng của ba kiểu trên. Các map object có thể được thiết lập kiểu hiển thị sử dụng phương thức setMapType() của đối tượng GMap2. Đoạn code sau thiết lập chế độ hiển thị là statelite: var map = new GMap2(document.getElementById("map_canvas")); map.setMapType(G_SATELLITE_MAP); Mỗi map object cũng có thể tự hiển thị một cửa sổ thông tin (info window) của kiểu GInfoWindow, cửa sổ này có nội dung là một đoạn HTML, và được hiển thị trên của bản đồ. Một đối tượng GInfoWindow không có các hàm tạo, chúng được tự động tạo ra và gắn vào bản đồ khi chúng ta tạo ra một map object. Chúng ta không thể hiện thị nhiều hơn một info window tại cùng một thời điểm với một map object cụ thể, nhưng có thể di chuyển cũng như thay đổi nội dung của nó nếu cần. Lớp GMap2 cung cấp phương thức openInfoWindow(), lấy tham số là một điểm và một phần tử DOM để hiển thị một info window. Phương thức openInfoWindowHtml() cũng tương tự, nhưng nhận tham số thứ hai là một xâu chứ không phải một phần tử DOM. Ví dụ sau hiển thị một info window tại trung tâm của bản đồ với thông điệp “Hello, world”. 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")); 20 Hình 3. Info Window 2.2.2. Events Đối với mỗi trình duyệt, JavaScript được xem là một even driven, nghĩa là JavaScript đáp ứng với các tương tác bằng cách tạo ra các sự kiện và mong muốn rằng chương trình sẽ lắng nghe các sự kiện này. Chẳng hạn, với một trình duyệt, các tương tác chuột và bàn phím của người dùng sẽ gây ra sự kiện, sự kiện này lại được tạo nên trong DOM. Chương trình sẽ lắng nghe những sự kiện đã được đăng ký với các event listener của Java Scriptvà thực hiện xử lý mỗi khi nhận được một sự kiện nào đó. Google Map API đã thêm vào các mô hình sự kiện (event model) bằng cách định nghĩa sự kiện cho các đối tượng Map API. Những sự kiện này hoàn toàn khác và tách rời so với các sự kiện chuẩn trong DOM. Tuy nhiên, do các trình duyệt khác nhau thực thi các event object trên DOM khác nhau nên Google Map API cung cấp thêm cơ chế để lắng nghe và đáp ứng sự kiện DOM này mà không cần thêm vào điều khiển cho một trình duyệt cụ thể. 21 Sự kiện trong Google Map API được xử lý bằng cách sử dụng các hàm tiện ích trong GEvent namespace. Mỗi Map API object có một số lượng tên các sự kiện nhất định. Chẳng hạn, GMap2 có các sự kiện là click, dbclick, move …Với mỗi sự kiện trong một ngữ cảnh cụ thể, chúng ta có thể truyền vào các tham số để nhận dạng ngữ cảnh này. Ví dụ, khi người dùng di chuyển chuột quanh phạm vi một map object, ta có thể biết được chính xác các tọa độ mà chuột đã di chuyển qua trên bản đồ. Để đăng ký một sự kiện, chúng ta sử dụng phương thức tĩnh GEvent.addListener(). Phương thức này nhận hai tham số là một map object và tên sự kiện cần lắng nghe. Chẳng hạn, muốn bắt sự kiện nhấp chuột của người dùng, có thể làm như sau : 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."); }); Mỗi sự kiện trong danh sách các sự kiện của Maps API đều có thể nhận các tham số truyền vào. Chúng ta có thể truy cập trực tiếp các tham số này bằng cách đưa vào trong hàm xử lý xự kiện các biến tham chiếu để nhận giá trị. Ví dụ sau đưa vào hai biến tham chiếu và nhận được tọa độ người dùng nhấp chuột và zoom level hiện thời. GEvent.addListener(map,"click", function(overlay,point) { var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom(); map.openInfoWindow(point, myHtml); }); 22 Hình 4. Sử dụng tham số truyền vào. Các hàm rất hữu ích khi ta gắn nó với các sự kiện của một thể hiện đối tượng cụ thể. Tuy nhiên, khi ta muốn hàm của ta liên kết với tất cả các thể hiện của một đối tượng, chúng ta có thể sử dụng phương thức GEvent.Bind().Trong ví dụ sau, một thể hiện của lớp sẽ thực hiện việc binding các sự kiện với phương thức của nó. function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; 23 alert("You have clicked the map " + this.counter + " " + (this.counter == 1 ? "time" : "times")); } var application = new MyApplication(); Hình 5. Binding các Event với các Object Method. Event Object của Google Maps API tự tạo ra và quản lý các sự kiện của nó. Tuy nhiên, DOM đôi khi cũng tạo ra các sự kiện của riêng mình. Google Maps API cung cấp thêm cơ chế để giữ và xử lý các sự kiện này, đó là phương thức tĩnh GEvent.addDomListener(), dùng để đăng ký cho một sự kiện DOM. Khi việc lắng nghe một sự kiện không còn cần thiết nữa, một cách tự nhiên, ta cần hủy nó. Vì các hàm addListener() hay addDomListener() trả lại cho ta một GEventListener handle nên việc hủy bỏ một sự kiện được thực hiện như sau : var myEventListener = GEvent.addListener(…); GEvent.removeListener(myEventListener); 24 2.2.3. Controls Google Map API cung cấp các phần tử UI (User Interface) cho phép người dùng tương tác với bản đồ. Những phần tử này được gọi là các control (điều khiển) và ta có thể thêm tất cả các control này vào trong một ứng dụng Google Map API. Maps API đã xây dựng sẵn một số control chúng ta có thể sử dụng trong bản đồ của mình: • GLargeMapControl – Thiết lập chế độ large pan/zoom. Xuất hiện mặc định ở góc trái trên của bản đồ. • GSmallMapControl - Thiết lập chế độ small pan/zoom. Xuất hiện mặc định ở góc trái trên của bản đồ. • GSmallZoomControl - Thiết lập chế độ small zoom control (không có các panning control). • GScaleControl – Tỉ lệ bản đồ. • GMapTypeControl – Các button cho phép người dùng lựa chọn giữa các map type . • GHierarchicalMapTypeControl – Danh sách các buttons, menu được thêm vào cho phép người dùng lựa chọn các kiểu map type tự tạo khác nhau. • GOverviewMapControl – Cho phép hiển thị một bản đồ overview, xuất hiện ở góc dưới cùng bên phải. Tất cả các control trên được xây dựng từ lớp cơ sở GControl. Có sự khác biệt giữa GmapTypeControl và GHierarchicalMapTypeControl với các control còn lại là chúng có thể được cấu hình. Mặc định, Google Map API cung cấp ba map type là G_NORMAL_MAP, G_SATELLITE_MAP và G_HYBRID_MAP. Nếu muốn, chúng ta có thể điều chỉnh các map type này, có thể loại bỏ chúng sử dụng GMap2.removeMapType() 25 hoặc thêm vào bằng cách sử dụng GMap2.addMapType(). Đoạn mã sau loại bỏ kiểu G_HYBRID_MAP từ các map type gắn với một map object, khi chúng ta loại bỏ GMapTypeControl từ map object của ta, sẽ chỉ có hai map type là G_NORMAL_MAP và G_SATELLITE_MAP xuất hiện. 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()); Hình 6. Thêm các Control và loại bỏ một Map Type. Ở ví dụ trên, các control được thêm vào map object sử dụng phương thức addControl() của lớp GMap2. Có thể có nhiều control cùng được thêm vào một map object. 26 Phương thức addControl() ở trên nhận một tùy chọn thứ hai là tham số về GControlPosition cho phép chúng ta chỉ định vị trí mà control xuất hiện trên bản đồ. Giá trị này có thể là một trong các giá trị sau đây : • G_ANCHOR_TOP_RIGHT • G_ANCHOR_TOP_LEFT, • G_ANCHOR_BOTTOM_RIGHT • G_ANCHOR_BOTTOM_LEFT Nếu tùy chọn này được bỏ qua, Maps API sẽ sử dụng vị trí mặc định của các control. 2.2.4. Map Overlays Overlay là các đối tượng trên bản đồ được liên kết với kinh độ và vĩ độ của hệ tọa độ, chúng di chuyển khi chúng ta thực hiện dịch chuyển hay zoom bản đồ. Maps API có các kiểu overlay cơ bản sau: • Các điểm trên bản đồ được hiển thị nhờ vào các marker, trên bản đồ chúng thường là các biểu tượng sẵn có. Marker là các đối tượng của kiểu GMarker, chúng được tạo nên từ kiểu GIcon. • Các đoạn thẳng trên bản đồ được hiển thị sử dụng các polyline (tập hợp các điểm) là đối tượng của kiểu GPolyline. • Trên bản đồ các vùng được hiển thị dưới dạng polygon nếu nó có hình dạng bất kỳ, dưới dạng ground nếu nó là hình chữ nhật. Các polygon tương tự như các polyline ở chỗ nó bao gồm tập các đoạn thẳng khép kín và có hình dáng bất kỳ. • Info Window là một kiểu overlay đặc biệt, nó được thêm vào bản đồ một cách tự động và chỉ có một đối tượng duy nhất của kiểu GInfoWindow. Marker là đối tượng hay gặp nhất và thường xuất hiện trong các ứng dụng Google Map API. Chúng đại diện cho các điểm trên bản đồ. Mặc định, marker sử 27 dụng G_DEFAULT_ICON nếu chúng ta không chỉ định một icon cụ thể cho chúng. Một GMarker Constructor nhận hai tham số là tọa độ GLatLng và một tùy chọn GMarkerOptions. Marker được thiết kế cho các tương tác. Thông thường, marker nhận các sự kiện “click” và đưa ra một info window. Ví dụ sau thực hiện thêm 10 marker ở 10 vị trí bất kỳ trê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 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 < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } Trong ví dụ này, trước tiên chúng ta sử phương thức getBounds() của GMap2 lấy được hình chữ nhật bao của bản đồ. Sau đó, sử dụng các phương thức geSouthWest() và getNorthEast() lấy ra các tọa độ trên trái và dưới phải của bản đồ, dùng hàm math.random() tạo random 10 vị trí nằm trên bản đồ, cuối cùng, tạo các marker ở các vị trí đó. 28 Hình 7. Thêm 10 Marker ở các vị trí bât kỳ. Marker là các đối tượng có thể tương tác, có thể “click” và “drag” tới vị trí mới. Mặc định, các marker có thể “click’ nhưng không thể “drag”. Muốn “drag” được các marker, chúng ta khởi tạo marker và thêm vào tùy chọn draggable được thiết lập là true. Quá trình “drag” một marker bao gồm bốn loại sự kiện : “click”, “dragstart”, “drag” và “dragend” để diễn đạt các trạng thái “drag”. Trong ví dụ sau, chúng ta bắt sự kiện lúc bắt đầu “drag” (“dragstart”) và lúc kết thúc “drag” (“dragend”). 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(); }); 29 GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("Just bouncing along..."); }); map.addOverlay(marker); Khi ta thêm một số lượng lớn các marker vào bản đồ, chúng làm giảm hiệu năng của trang w