Sự kiện Google Maps
Nhấp vào Điểm đánh dấu để thu phóng
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 một trình xử lý sự kiện vào điểm đánh dấu để thu phóng bản đồ khi được nhấp vào).
Đây là mã được thêm vào:
Thí dụ
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Chúng tôi đăng ký thông báo sự kiện bằng trình xử lý sự kiện addListener (). Phương thức đó nhận 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.
Xoay 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 bản đồ trở lại sau 3 giây:
Thí 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ở một InfoWindow khi nhấp vào Điểm đánh dấu
Nhấp vào điểm đánh dấu để hiển thị một infowindow với một số văn bản:
Thí 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 mỗi đ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 một điểm đánh dấu nơi người dùng đã nhấp vào và hiển thị một thông báo với các vĩ độ và kinh độ của điểm đánh dấu:
Thí 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);
}