處理事件和使用者互動

您可以在 LocalContextMapView 執行個體和內部地圖上處理事件。LocalContextMapView 僅支援兩個事件,這些事件會在使用者選取地點 (開啟地點詳細資料檢視畫面) 時,以及使用者關閉地點詳細資料檢視畫面時觸發。您可透過這些事件更新任何 UI 元素。

  • 使用者選取地點時,在顯示地點詳細資料檢視畫面之前placedetailsviewshowstart 就會觸發。
  • 使用者關閉地點詳細資料檢視畫面時,在隱藏地點詳細資料檢視畫面之前placedetailsviewhidestart 就會觸發。

以下範例顯示如何在 LocalContextMapView 執行個體上設定兩個支援的事件監聽器 (您可以在 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!");
});

您也可以處理地圖上透過 LocalContextMapView 建立的使用者介面事件。以下範例顯示地圖偵測到滑鼠游標懸停事件時觸發的事件處理常式:

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

按下 Escape 鍵時,LocalContextMapView 也會關閉地點詳細資料檢視畫面或相片燈箱。如要調整這項行為,建議您在擷取階段將 keydown 事件和 Escape 鍵的事件監聽器新增至視窗物件,以攔截預設行為:

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

或者,如要允許 LocalContextMapView 在程式碼之前處理鍵盤事件,請在冒泡階段於視窗中註冊 keydown 事件監聽器:

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

瞭解詳情

  • 查看事件應用實例!當地特色資料庫範例說明當地特色資料庫的常見用途,包括導入詳情。
  • 進一步瞭解 Maps JavaScript API 中的事件