Question

我试图了解如何在没有react-google-maps库的情况下使用React响应Google Maps JS API事件。这会以传统的Javascript方式添加事件监听器吗？

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

感谢您的帮助！

Answer 1

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

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

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

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

您可以参考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。

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

1 个答案: