Event Google Maps

单击标记进行缩放

我们仍然使用上一页的地图：以英国伦敦为中心的地图。

现在，我们希望在用户单击标记时进行缩放（我们将一个事件处理程序附加到标记上，以便在单击时缩放地图）。

这是添加的代码：

ตัวอย่าง

// 单击标记时缩放至 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

我们使用 addListener() 事件处理程序来注册事件通知。该方法接受的参数是：

• 一个对象
• เหตุการณ์ที่ต้องการดูแล
• ฟังก์ชันที่เรียกของหน้าต่าง

ย้ายแผนที่กลับไปที่สัญลักษณ์

ที่นี่เราบันทึกการเปลี่ยนแปลงการเซ็ตซูลมาและย้ายแผนที่เมื่อ 3 วินาทีหลัง

ตัวอย่าง

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

เปิดหน้าต่างข้อมูลเมื่อคลิกที่สัญลักษณ์

คลิกที่สัญลักษณ์เพื่อแสดงหน้าต่างข้อมูลที่มีข้อความ

ตัวอย่าง

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

ตั้งสัญลักษณ์และเปิดหน้าต่างข้อมูลสำหรับแต่ละสัญลักษณ์

รันฟังก์ชันเมื่อผู้ใช้คลิกที่แผนที่

placeMarker() ฟังก์ชันจะใส่ที่ที่ผู้ใช้คลิกลงมาที่ที่ที่มีสัญลักษณ์และแสดงหน้าต่างข้อมูลที่มีตำแหน่งและเส้นแวงของสัญลักษณ์

ตัวอย่าง

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: 'ละติจูด: ' + location.lat() +
    เส้นแวง: ' + location.lng()
  });
  infowindow.open(map,marker);
}