คลิกที่เครื่องหมายเพื่อซูม - แนบจัดการเหตุการณ์ไปยังแผนที่ของ Google
คลิกที่เครื่องหมายเพื่อซูม
เรายังคงใช้แผนที่จากหน้าก่อนหน้านี้: แผนที่มีศูนย์กลางอยู่ที่กรุงลอนดอนประเทศอังกฤษ
ตอนนี้เราต้องการที่จะซูมเมื่อผู้ใช้คลิกที่เครื่องหมาย (เราแนบตัวจัดการเหตุการณ์เครื่องหมายที่ซูมแผนที่เมื่อคลิกก)
นี่คือรหัสที่เพิ่ม:
ตัวอย่าง
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); ลองตัวเอง» เราลงทะเบียนสำหรับการแจ้งเตือนเหตุการณ์ใช้ addListener() จัดการเหตุการณ์ วิธีการที่จะนำวัตถุเหตุการณ์เพื่อฟังและฟังก์ชั่นที่จะเรียกเมื่อมีเหตุการณ์เกิดขึ้นที่ระบุ
แพนกลับไป Marker
ที่นี่เราเพิ่มตัวจัดการเหตุการณ์ไปยังแผนที่สำหรับการเปลี่ยนแปลงที่ 'ศูนย์' ทรัพย์สินและเลื่อนแผนที่กลับไปเครื่องหมายหลังจาก 3 วินาทีในเหตุการณ์ center_changed:
ตัวอย่าง
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
}); ลองตัวเอง» เปิด InfoWindow เมื่อคลิกที่เครื่องหมาย
คลิกที่เครื่องหมายเพื่อแสดง infowindow มีข้อความบางส่วน:
ตัวอย่าง
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); ลองตัวเอง» ตั้งเครื่องหมายและเปิด InfoWindow สำหรับแต่ละเครื่องหมาย
เรียกใช้ฟังก์ชั่นเมื่อผู้ใช้คลิกที่แผนที่
placeMarker() ฟังก์ชั่นวางเครื่องหมายที่ผู้ใช้มีการคลิกและการแสดง infowindow กับละติจูดและลองจิจูดของเครื่องหมาย:
ตัวอย่าง
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(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);
} ลองตัวเอง»