Menangani Peristiwa dan Interaksi Pengguna

Anda dapat menangani peristiwa pada instance LocalContextMapView, serta pada peta internal. LocalContextMapView hanya mendukung dua peristiwa, yang aktif saat pengguna memilih sebuah tempat (membuka tampilan detail tempat), dan saat pengguna menutup tampilan detail tempat. Peristiwa ini memungkinkan Anda memperbarui elemen UI.

  • placedetailsviewshowstart diaktifkan saat pengguna memilih tempat, sebelum tampilan detail tempat ditampilkan.
  • placedetailsviewhidestart diaktifkan saat pengguna menutup Tampilan Place Details, sebelum tampilan detail tempat disembunyikan.

Contoh berikut menunjukkan setelan kedua pemroses yang didukung pada instance LocalContextMapView (Anda dapat melakukannya dalam fungsi initMap()):

// Set the LocalContextMapView event handlers.
localContextMapView.addListener('placedetailsviewshowstart', () => {
  console.log("The 'placedetailsviewshowstart' event just fired!");
});

localContextMapView.addListener('placedetailsviewhidestart', () => {
  console.log("The 'placedetailsviewhidestart' event just fired!");
});

Anda juga dapat menangani peristiwa antarmuka pengguna pada peta yang dibuat dari LocalContextMapView. Contoh berikut menunjukkan pengendali peristiwa yang diaktifkan setiap kali peta mendeteksi peristiwa pengarahan mouse:

// Set a mouseover event handler on the inner map.
localContextMapView.map.addListener('mouseover', () => {
  console.log("The mouse just entered the map!");
});

LocalContextMapView juga menutup tampilan detail tempat atau lightbox foto saat tombol escape ditekan. Jika Anda ingin mengubah perilaku ini, sebaiknya tambahkan pemroses untuk peristiwa keydown dan tombol escape dalam fase perekaman ke objek jendela untuk menangkap perilaku default:

// Change the escape key behavior.
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  event.stopPropagation();
  // Handle the event.
  // ...
}, /* useCapture= */ true);

Atau, untuk mengizinkan LocalContextMapView menangani peristiwa keyboard sebelum kode Anda, daftarkan pemroses keydown pada jendela dalam fase balon:

// Won't be fired if LocalContextMapView handled the escape key to close
// the place details view or photo lightbox:
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  // Handle the event.
  // ...
}, /* useCapture= */ false);

Pelajari lebih lanjut

  • Lihat cara kerja peristiwa. Contoh Library Konteks Lokal menunjukkan penggunaan umum Library Konteks Lokal, termasuk detail implementasi.
  • Baca selengkapnya tentang Peristiwa di Maps JavaScript API.