Overlay là một đối tượng trên bản đồ gắn với vĩ độ/tung độ khi họ di chuyển hoặc kéo, phóng to-thu nhỏ map. Overlays phản ánh các đối tượng bạn thêm vào bản đồđể thiết kế các điểm, các đường và các vùng.
Maps API có một số loại overlays:
•Điểm trên map được hiển thị sử dụng ‘markers’ – đối tượng của lớp GMarker, và thường hiển thị một biểu tượng tùy thích.
•Đường trên map được hiển thị sử dụng ‘polylines’ (tập các điểm) –
đối tượng của lớp Gpolyline.
•Vùng trên map hiển thị như ‘polygons’ (vùng với hình dạng bất kì) hoặc ‘ground overlays’ (vùng là hình chữ nhật).
•Map sẽ được hiển thị sử dụng ‘tile overlay’. Bạn có thể sửa đổi nó bằng cách sử dụng GTileLayerOverlay hoặc tạo mới sử dụng GMapType.
Mỗi overlay thực hiện một giao diện Goverlay. Overlay được thêm vào
bản đồ sử dụng Gmap2.addOverlay() và có thể xóa bỏ sử dụng
GMap2.removeOverlay(). Bạn sẽ nhìn thấy:
H3.5: map_api_overlay.html
Markers xác định điểm trên map. Chúng ta sử dụng
G_DEFAULT_ICON để xác định icon tùy ý, GMarker cần GLatLng và một
đối tượng tùy chọn GMarkerOptions như các biến.
- Marker có thể di chuyển
Ở ví dụ trên, chúng ta thực hiện cho marker có thể nhận được ‘click’ và có thể được kéo đến một ví trí mới. Những sự kiện có thể xảy ra trên marker: click, dragstart, drag, dragend. Và để những sự kiện này có tác dụng, chúng ta phải khởi động chúng.
- Icons
Một số lượng các image khác nhau có thể tạo nên một icon trong Maps API.
Một Icons đơn giản nhất dựa trên kiểu G_DEFAULT_ICON. Bạn tạo một icon từ kiểu này cho phép bạn thay đổi nhanh chóng icon mặc định chỉ với một vài thao tác.
- Polylines
GPolyline bao tạo các đường trên map. Một GPolyline bao gồm một chuỗi các điểm và tạo thành chuỗi các đoạn có thể liên kết điểm theo thứ tự,
Ta vẽđược đường trên map:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter); }); GEvent.addListener(marker, "dragstart" , function() { map.closeInfoWindow(); });
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Bạn vừa di chuyển..." + letter);
H3.6: map_api_polyline.html