Latest web development tutorials

เหตุการณ์ Google Maps

คลิกที่เครื่องหมายเพื่อซูม - มีผลผูกพันกับ Google แผนที่เหตุการณ์


คลิกที่เครื่องหมายแผนที่ซูม

เรายังคงใช้แผนที่กระดาษอีกครั้งโดยใช้ลอนดอน

ผู้ใช้จุดเพื่อให้บรรลุเมื่อเครื่องหมายถูกคลิกฟังก์ชั่นการซูม (ซูมเครื่องหมายบนแผนที่มีการคลิกเหตุการณ์ที่มีผลผูกพัน)

รหัสเป็นดังนี้:

ตัวอย่าง

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

ลอง»

ใช้ addListener () จัดการเหตุการณ์ที่จะลงทะเบียนฟังเหตุการณ์ วิธีการใช้วัตถุเหตุการณ์ที่จะฟังสำหรับเมื่อมีเหตุการณ์เกิดขึ้นที่ระบุไว้จะถูกเรียกว่า


สถานะตั้งค่าใหม่

เราได้เพิ่มตัวจัดการเหตุการณ์ที่แผนที่เพื่อเปลี่ยนคุณสมบัติ 'ศูนย์' ใช้รหัสต่อไปนี้หลังจาก 3 วินาทีเหตุการณ์ center_changed จะถูกทำเครื่องหมายศูนย์การเปลี่ยนแปลง:

ตัวอย่าง

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

ลอง»


เมื่อเครื่องหมายคลิกเพื่อเปิดหน้าต่างข้อมูล

คลิกที่เครื่องหมายเพื่อแสดงข้อความในหน้าต่างข้อความ:

ตัวอย่าง

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

ลอง»


ตั้งป้ายและแท็กข้อมูลสำหรับแต่ละหน้าต่างที่เปิด

การดำเนินงานของหน้าต่างเมื่อผู้ใช้คลิกที่แผนที่

ผู้ใช้คลิกที่แผนที่เพื่อฟังก์ชั่นตำแหน่งหมุด () บนสถานที่ที่กำหนดจะวางเครื่องหมายและหน้าต่างข้อความ pop-up:

ตัวอย่าง

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

ลอง»


Google แผนที่ - คู่มือการจัดกิจกรรม

Google Maps API คู่มืออ้างอิง