Acara Google Maps
Klik tanda untuk memperbesar peta
Kami masih menggunakan peta London, Inggris yang kami gunakan di artikel sebelumnya.
Ketika pengguna mengklik tanda, fungsi zooming peta direalisasikan (acara zoom peta terikat ketika tanda diklik).
Kodenya adalah sebagai berikut:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.marker ({position: mycenter, judul: 'klik ke zoom'}); marker.setmap (peta); // zoom ke 9 saat mengklik pada markergoOgle.maps.event.addlistener (marker, 'klik', fungsi () {peta.setzoom (9); maper.seter (marker, 'klik', function () {peta.setZoom (9); Map.seter (marker, 'klik', function () {MAP.SetZoom (9); Map.seter (marker, 'click', function () {MAP.SetZoom (9); Map.seter (marker, 'Marker', function () {MAP.SetZoom (9); Maper.seter (Marker, 'Marker', function () {MAP.SETZOOM (9); });} google.maps.event.adddomListener (jendela, 'muat', inisialisasi); </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Gunakan event handler addListener () untuk mendaftarkan mendengarkan acara. Metode ini menggunakan objek dan peristiwa untuk mendengarkan, dan fungsi akan dipanggil ketika peristiwa yang ditentukan terjadi.
Setel ulang tanda
Kami mengubah atribut 'tengah' dengan menambahkan event handler ke peta. Kode berikut menggunakan acara Center_Changed untuk menandai titik tengah setelah 3 detik:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.marker ({position: mycenter, judul: 'klik ke zoom'}); marker.setMap (peta); // zoom ke 9 saat mengklik pada markergoOgle.maps.event.addlistener (marker, 'klik', fungsi () {peta.setzoom (9); maper.seter (marker, 'klik', function () {MAP.SetZoom (9); Map.seter (marker, 'klik', function () {MAP.SetZoom (9); Maper.seter (marker, 'klik', function () {MAP.SetZoom (9); Maper.seter (Marker, 'Marker', Maper () {MAP.SetZoom (9); google.maps.event.addlistener (peta, 'center_changed', function () {// 3 detik setelah pusat peta telah berubah, panci kembali ke marker window.setTimeout (function () {peta.panto (marker.getPosition ());}, 3000);});} google.maps.evoss. inisialisasi); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Jendela pesan terbuka saat Anda mengklik tanda.
Klik tag untuk menampilkan beberapa informasi teks di jendela informasi:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorpvdvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </</skrip> var scripter = google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var peta = Google baru.maps.maps (document.getelement) (document. google.maps.Marker({ position:myCenter, });marker.setMap(map);var infowindow = new google.maps.InfoWindow({ content:"Hello World!" });google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });} google.maps.event.adddomListener (jendela, 'muat', inisialisasi); </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Mengatur tanda dan membuka jendela informasi untuk setiap tanda
Menjalankan jendela saat pengguna mengklik peta
Ketika pengguna mengklik lokasi di peta, gunakan fungsi placemarker () untuk menempatkan tanda pada posisi yang ditentukan dan jendela pesan muncul:
Contoh
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydydydyorsorspvd2u7oatoawhc9ysh6ohxoiym&sensor=false"> </script> <cript> var script; var my my my my my my my google.maps.latlng (51.508742, -0.120850); fungsi initialize () {var mapprop = {center: mycenter, zoom: 5, maptypeId: google.maps.maptypeid.roadmap}; peta = google.maps.map baru (document.geteLementById ("googlemap"), mapprop); google.maps.event.addlistener (peta, 'klik', fungsi (event) {placemarker (event.latlng);});} function placemarker (lokasi) {var marker = new google.maps.marker ({position: location, peta: peta,}); var infowindow = new google.maps.infowindow ({content: 'latitude:' + location.lat () + '<br> longitude:' + location.lng ()}); infowindow.open (peta, marker);} google.maps.event.adddomlistener (jendela, 'muat', inisialisasi); </script> </head> <body> <v id = "googlemap"> </div> </body> </html>Di atas adalah kompilasi dari pengetahuan dasar acara Google Maps. Kami akan terus menambahkan pengetahuan yang relevan di masa depan. Terima kasih atas dukungan Anda untuk situs ini!