1

我正在使用react-google-maps，并且我有一个在标记单击时打开的信息框，其中包含一些文本和输入字段。

我有一个两难境地，我很困。我想允许用户突出显示输入字段中的文本（在信息框内）。

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

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

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

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

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

4

1 回答 1

1

我修改了此解决方案并将其集成到您的示例中。这包括：

  • 在组件上设置enableEventPropagation为。falseInfoBox
  • 向 InfoBox ( id="counter-button") 内的按钮添加 id。

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

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

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

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

于 2018-03-16T14:24:45.033 回答