如何在没有外部库的情况下收听Google Maps API事件？

Question

我试图了解如何在没有我自己的知识的情况下，使用React来响应Google Maps JS API事件，而无需使用react-google-maps库。 是否可以通过添加事件侦听器的传统Javascript方式完成此操作？

特别是，我尝试使用在创建Google Map的同一React组件中定义的函数来响应Google Maps Marker上的click事件。

Answer 1

在这个答案中，我将向您解释如何使用js向地图添加事件监听器，以及接下来如何使用自定义事件监听器创建事件。

---

首先，使用js在地图中添加事件监听器。 解决方案非常简单。 您可以使用以下代码行：

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

在这里，您向对象（在示例中，地图）添加了一个简单的侦听器。 当地图完全加载（空闲）时，此代码会在您的窗口上添加警报。

您可以在此处查阅Google的事件文档。

---

接下来，我们尝试创建一个自定义侦听器和一个自定义事件。

这行代码初始化了一个事件“ build”：

var event = new Event('build');

此行将此事件的所有侦听器称为“ 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);

您可以在此处获得完整的文档。