กิจกรรม Google Maps
คลิกเครื่องหมายเพื่อซูมแผนที่
เรายังคงใช้แผนที่ของลอนดอนประเทศอังกฤษที่เราใช้ในบทความก่อนหน้า
เมื่อผู้ใช้คลิกเครื่องหมายฟังก์ชั่นของการซูมแผนที่จะรับรู้ (เหตุการณ์การซูมแผนที่จะถูกผูกไว้เมื่อมีการคลิกเครื่องหมาย)
รหัสมีดังนี้:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: myCenter, ชื่อเรื่อง: 'คลิกเพื่อซูม'}); marker.setMap (แผนที่); // ซูมเป็น 9 เมื่อคลิกที่ markerGoogle.maps.event.addlistener (marker, 'คลิก', ฟังก์ชัน () });} google.maps.event.adddomlistener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>ใช้ตัวจัดการกิจกรรม AddListener () เพื่อลงทะเบียนการฟังเหตุการณ์ วิธีนี้ใช้วัตถุและเหตุการณ์ที่จะฟังและฟังก์ชั่นจะถูกเรียกเมื่อเหตุการณ์ที่ระบุเกิดขึ้น
รีเซ็ตเครื่องหมาย
เราเปลี่ยนแอตทริบิวต์ 'center' โดยการเพิ่มตัวจัดการเหตุการณ์ไปยังแผนที่ รหัสต่อไปนี้ใช้เหตุการณ์ center_changed เพื่อทำเครื่องหมายจุดกึ่งกลางหลังจาก 3 วินาที:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: myCenter, ชื่อเรื่อง: 'คลิกเพื่อซูม'}); marker.setMap (แผนที่); // ซูมถึง 9 เมื่อคลิกที่ markerGoogle.maps.event.addlistener (marker, 'คลิก', ฟังก์ชั่น (map.setzoom (9); google.maps.event.addlistener (แผนที่, 'center_changed', ฟังก์ชั่น () {// 3 วินาทีหลังจากศูนย์กลางของแผนที่เปลี่ยนไปแพนกลับไปที่หน้าต่างเครื่องหมาย Settimeout (ฟังก์ชั่น () {map.panto (marker.getPosition ());}, 3000); เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>หน้าต่างข้อความจะเปิดขึ้นเมื่อคุณคลิกเครื่องหมาย
คลิกแท็กเพื่อแสดงข้อมูลข้อความบางอย่างในหน้าต่างข้อมูล:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: mycenter,}); marker.setMap (แผนที่); var infowindow = ใหม่ google.maps.infowindow ({เนื้อหา: "Hello World!"}); google.maps.event.addlistener (marker, 'คลิก', ฟังก์ชั่น () });} google.maps.event.adddomlistener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>การตั้งค่าเครื่องหมายและเปิดหน้าต่างข้อมูลสำหรับแต่ละเครื่องหมาย
ดำเนินการหน้าต่างเมื่อผู้ใช้คลิกบนแผนที่
เมื่อผู้ใช้คลิกตำแหน่งบนแผนที่ให้ใช้ฟังก์ชั่น placemarker () เพื่อวางเครื่องหมายบนตำแหน่งที่ระบุและหน้าต่างข้อความจะปรากฏขึ้น:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: mycenter, ซูม: 5, maptypeid: google.maps.maptypeid.roadmap}; MAP = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop); google.maps.event.addlistener (แผนที่, 'คลิก', ฟังก์ชั่น (เหตุการณ์) {placemarker (event.latlng);});} ฟังก์ชั่น placemarker (ตำแหน่ง) {marker var = new google.maps.marker ({ตำแหน่ง: ตำแหน่ง: แผนที่: แผนที่,}); var infowIndow = ใหม่ google.maps.infowIndow ({เนื้อหา: 'ละติจูด:' + location.lat () + '<br> ลองจิจูด:' + location.lng ()}); infowindow.open (แผนที่, marker);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>ข้างต้นเป็นการรวบรวมความรู้พื้นฐานของเหตุการณ์ Google Maps เราจะเพิ่มความรู้ที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!