Sự kiện Google Maps

Nhấp vào dấu chấm để phóng to

Chúng tôi vẫn sử dụng bản đồ trên trang trước: bản đồ trung tâm là London, Anh.

Hiện tại, chúng tôi muốn phóng to khi người dùng nhấp vào dấu chấm (chúng tôi thêm một trình xử lý sự kiện vào dấu chấm để phóng to bản đồ khi nhấp).

Đây là mã được thêm vào:

mô hình

// Phóng to đến 9 khi nhấp vào dấu chấm
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Chúng tôi sử dụng trình xử lý sự kiện addListener() để đăng ký thông báo sự kiện. Phương thức này chấp nhận các tham số là:

• Một đối tượng
• Một sự kiện cần lắng nghe
• Một hàm được gọi khi một sự kiện xảy ra

Dịch chuyển trở lại dấu chấm

Ở đây, chúng tôi lưu lại thay đổi phóng to và dịch chuyển bản đồ sau 3 giây:

mô hình

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ở cửa sổ thông tin khi nhấp vào dấu chấm

Nhấp vào dấu chấm để hiển thị cửa sổ thông tin chứa văn bản:

mô hình

var infowindow = new google.maps.InfoWindow({
  nội dung: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Cài đặt dấu chấm và mở cửa sổ thông tin cho mỗi dấu chấm

Chạy hàm khi người dùng单击 vào bản đồ.

placeMarker() hàm sẽ đặt một dấu chấm trên vị trí单击 của người dùng và hiển thị một cửa sổ thông tin chứa vĩ độ và kinh độ của dấu chấm:

mô hình

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({
    nội dung: 'Vĩ độ: ' + location.lat() +
    'Kinh độ: ' + location.lng()
  });
  infowindow.open(map,marker);
}