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..."); });

2.4.4. Icons (Biểu tượng) (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 icon

var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image =

"http://www.google.com/intl/en_us/mapfiles/ms/micons/blue- dot.png";

// Set up our GMarkerOptions object markerOptions = { icon:blueIcon };

// 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, 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 icon

var tinyIcon = new GIcon(); tinyIcon.image =

"http://labs.google.com/ridefinder/images/mm_20_red.png"; tinyIcon.shadow =

"http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 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 literal markerOptions = { icon:tinyIcon };