当鼠标在信息框内时防止地图拖动（但也允许文本突出显示）

Preventing map from dragging while mouse is within InfoBox (but also allowing text highlighting)

我正在使用 react-google-maps，我有一个信息框，它在单击标记时打开，里面有一些文本和输入字段。

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

目前，highlighting/dragging 信息框中的鼠标将平移底层地图。

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

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

示例： https://codesandbox.io/s/l2mymj912m

我确实将 enableEventPropagation 设置为 true。将其设置为 false 会启用突出显示，但会阻止 onClick.

之类的事件

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

  • 在 InfoBox 组件上将 enableEventPropagation 设置为 false。
  • 为信息框内的按钮添加一个 id (id="counter-button")。

  • 将以下属性添加到 InfoBox 组件：

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

查看：https://codesandbox.io/s/24w0m8m5wj

另外，这里有一些链接可以进一步阅读这个问题：