Question

我正在使用react-google-maps，我有一个InfoBox，可以在标记点击时打开，其中包含一些文本，输入字段。

我陷入两难境地，我很困惑。我想允许用户突出显示输入字段中的文本（在InfoBox中）。

目前，在InfoBox中突出显示/拖动鼠标将平移基础地图。

据我所知，谷歌地图有一个gestureHandling选项，如果设置为'none'，则会阻止拖动。这对我来说是不可能的，因为当鼠标在InfoBox中时，将gestureHandling设置为'none'也会阻止点击和选择输入字段。

我已经尝试了<GoogleMap onDrag />，但拖动事件不会让我以某种方式event.stopPropagation()公开“事件”。因此，是否可以选择性地仅关闭地图平移，同时允许在InfoBox组件中突出显示文本？

实施例： https://codesandbox.io/s/l2mymj912m

我的enableEventPropagation设置为true。将其设置为false会启用突出显示，但会阻止onClick等事件。

Answer 1

我修改了this solution并将其集成到您的示例中。其中包括：

在enableEventPropagation组件上设置false至InfoBox。
将ID添加到InfoBox内的按钮（id="counter-button"）。

将以下道具添加到InfoBox组件：

onDomReady={() => {
  let counterButton = document.getElementById("counter-button");
  counterButton.addEventListener("click", props.onButtonClick);
}}

检查出来：https://codesandbox.io/s/24w0m8m5wj

此外，以下是有关该问题的进一步阅读的一些链接：

防止在鼠标位于InfoBox内时拖动地图（但也允许文本突出显示）

1 个答案: