L ỜI MỞ ĐẦU 2
2.2.4. Map Overlays 26
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 web cũng như gây ra tình trạng lộn xộn tại một zoom level nào đó. Tính năng marker manager cung cấp giải pháp cho cả hai vấn đề trên, cho phép hiển thị số lượng lớn các marker trên cùng một bản đồ cũng như chỉ định ở zoom level nào thì marker được xuất hiện. Marker Manager sẽ giám sát viewport và
zoomlevel hiện thời, thêm các marker phù hợp, đồng thời loại bỏ các marker nằm ngoài viewport cũng như không nằm trong zoom level hiện tại. Tất cả các marker
phù hợp, được chuyển đến bản đồ một lần duy nhất để hiển thị. Điều này thực sự hiệu quả, vừa tăng hiệu suất thực thi của website, vừa loại bỏ những lộn xộn không đáng có.
Để sử dụng marker manager, chúng ta tạo ra một GMarkerManager Object
đồng thời chuyển một map object cho nó.
var map = new GMap2(document.getElementById("map_canvas")); var mgr = new GMarkerManager(map);
Maps API cung cấp một số tùy chọn để nâng cao hiệu quả thực thi của
maker manager đó là cho phép thêm vào các tùy chọn. Các tùy chọn này được truyền vào thông qua một GMakerManagerOptions object, bao gồm các trường sau:
• maxZoom: Chỉđinh mức zoom level cao nhất mà marker manager giám sát, giá trị mặc định là giá trị lớn nhất của zoom level mà Google Maps cung cấp.
30
• borderPadding: Xác định vùng mở rộng tính theo đơn vị pixel được giám sát bởi manager bên ngoài viewport hiện thời. Giá trị mặc định là 100.
• trackMarkers: Chỉ ra rằng liệu những marker đã thay đổi có tiếp tục được giám sát không. Giá trị mặc định là false.
GMakerManagerOptions là một object literal, nghĩa là chúng ta có thể khai báo mà không cần khởi tạo.
var map = new GMap2(document.getElementById("map_canvas"));
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true};
var mgr = new MarkerManager(map, mgrOptions);
Sau khi tạo ra một marker manager, làm thế nào để thêm vào các marker? GMarkerManager cho phép thêm một marker ngay tức khắc sử dụng phương thức
addMarker() và thêm vào một mảng các marker sử dụng phương thức
addMarkers() . Một marker duy nhất được thêm sử dụng addMarker() sẽ xuất hiện ngay lập tức trên bản đồ nếu nó nằm trong viewport và zoom level hiện thời. Tuy nhiên, thêm một tập các marker sử dụng addMarkers(), các marker sẽ không xuất hiện trên bản đồ cho đến khi chúng ta thực sự gọi phương thức refresh() của
GMarkerManager. Sau khi được gọi, GMarkerManager sẽ hiển thị tất cả các
31
