บทช่วยสอน เหตุการณ์ Google Maps ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
คลิกที่เครื่องหมายแผนที่ซูม,ตัวอย่าง,สถานะตั้งค่าใหม่,ตัวอย่าง,เมื่อเครื่องหมายคลิกเพื่อเปิดหน้าต่างข้อมูล,ตัวอย่าง,ตั้งป้ายและแท็กข้อมูลสำหรับแต่ละหน้าต่างที่เปิด,ตัวอย่าง,Google แผนที่ - คู่มือการจัดกิจกรรม,
เหตุการณ์ 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 คู่มืออ้างอิง