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 };