Sự kiện trên Google Maps
Bấm vào điểm đánh dấu để phóng to
Chúng tôi vẫn sử dụng bản đồ từ trang trước: bản đồ tập trung vào London, Anh.
Bây giờ chúng tôi muốn thu phóng khi người dùng nhấp vào điểm đánh dấu (Chúng tôi đính kèm trình xử lý sự kiện vào điểm đánh dấu để phóng to bản đồ khi được nhấp vào).
Đây là mã được thêm vào:
Ví dụ
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Chúng ta đăng ký thông báo sự kiện bằng cách sử dụng trình xử lý sự kiện addListener(). Phương thức đó lấy một đối tượng, một sự kiện để lắng nghe và một hàm để gọi khi sự kiện được chỉ định xảy ra.
Quay lại điểm đánh dấu
Tại đây, chúng tôi lưu các thay đổi thu phóng và xoay lại bản đồ sau 3 giây:
Ví dụ
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
Mở InfoWindow khi nhấp vào điểm đánh dấu
Bấm vào điểm đánh dấu để hiển thị cửa sổ thông tin với một số văn bản:
Ví dụ
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Đặt điểm đánh dấu và mở InfoWindow cho từng điểm đánh dấu
Chạy một chức năng khi người dùng nhấp vào bản đồ.
Hàm placeMarker() đặt điểm đánh dấu ở nơi người dùng đã nhấp vào và hiển thị cửa sổ thông tin với vĩ độ và kinh độ của điểm đánh dấu:
Ví dụ
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}