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

Question

据我所知，我试图了解如何使用 React 来响应 Google Maps JS API 事件，而无需使用 React-google-maps 库。这可以通过添加事件监听器的传统 Javascript 方式来完成吗？

特别是，我尝试使用在创建 Google map 的同一 React 组件中定义的函数来响应 Google map 标记上的点击事件。

Answer 1

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

<小时/>

首先，使用 js 在 map 中添加事件监听器。解决办法很简单。您可以使用这行代码:

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

在这里，您向对象(在示例中为 map )添加一个简单的监听器。本地图完全加载(空闲)时，此代码会在您的窗口上添加警报。

您可以查阅google的事件文档here .

<小时/>

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

此行初始化事件“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);

您可以获得完整的文档here .