กิจกรรม Google Maps
คลิกเครื่องหมายเพื่อซูม
เรายังคงใช้แผนที่จากหน้าที่แล้ว: แผนที่ที่มีศูนย์กลางอยู่ที่ลอนดอน ประเทศอังกฤษ
ตอนนี้เราต้องการซูมเมื่อผู้ใช้คลิกที่เครื่องหมาย (เราแนบตัวจัดการเหตุการณ์กับเครื่องหมายที่ซูมแผนที่เมื่อคลิก)
นี่คือรหัสที่เพิ่มเข้ามา:
ตัวอย่าง
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
เราลงทะเบียนสำหรับการแจ้งเตือนเหตุการณ์โดยใช้ตัวจัดการเหตุการณ์ addListener() เมธอดนั้นใช้อ็อบเจ็กต์ เหตุการณ์ที่จะรับฟัง และฟังก์ชันที่จะเรียกใช้เมื่อเกิดเหตุการณ์ที่ระบุ
เลื่อนกลับไปที่ Marker
ที่นี่ เราบันทึกการเปลี่ยนแปลงการซูมและเลื่อนแผนที่กลับหลังจาก 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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}