如何在沒有外部庫的情況下收聽Google Maps API事件？

Question

我想了解如何使用React來響應Google Maps JS API事件，而無需爲我自己的知識而使用react-google-maps庫。這是否會以傳統的Javascript方式添加事件監聽器？

特別是，我試圖對谷歌地圖標記的點擊事件在同一個定義的響應函數陣營，谷歌地圖在創建的組件。

感謝您的幫助！

Answer 1

在這個答案中，我將向您解釋如何使用js將事件偵聽器添加到地圖，然後介紹如何使用自定義事件偵聽器創建事件。

---

首先，使用js在地圖中添加一個事件監聽器。解決方案非常簡單。您可以使用此行代碼：

//Listen to your map 
map.addListener('idle', function (e) { 
    alert("Load"); 
}); 

在這裏，你添加一個簡單的監聽器對象（在本例中，地圖）。此代碼在地圖完全加載（空閒）時在窗口上添加警報。

您可以查閱google的事件文檔here。

---

接下來，我們嘗試創建一個自定義的監聽器和一個自定義事件。

此行初始化事件 '構建'：

var event = new Event('build'); 

而此行稱此事件 '構建' 的所有聽衆：

// Dispatch the event. 
window.dispatchEvent(event); 

現在，我們可以創建一個監聽器：

//Listen to your custom event 
window.addEventListener('build', function() { 
    console.log('OK'); 
}); 

我的代碼看起來像這樣：

var event = new Event('build'); 
//Listen to your custom event 
window.addEventListener('build', function() { 
    console.log('OK'); 
}); 
// Dispatch the event. 
window.dispatchEvent(event); 

您可以擁有完整的文檔here。