问题标签 [react-google-maps]

我正在尝试构建与Airbnb类似的地图，您可以在拖动地图时查看地点标记。我想在地图上显示来自 Google Places API 的“酒店”标记。

使用来自Google Maps的以下 JavaScript 代码，我可以在 Google 地图上显示酒店，但我想通过 React 使用react-google-maps来做到这一点。

react-google-maps有一个显示搜索输入字段的示例。因此，我可以通过搜索来搜索和显示标记，例如“伦敦的酒店”。但是，我不想搜索地点，而是想立即显示酒店的标记。（以下示例中的 API 密钥来自 react-google-maps 示例。）

我一直在尝试解决这个问题很多天，并且一直在寻找教程，但我找不到解决方案。我知道我应该使用：

并添加选项：

当使用 react-google-maps 时，我需要使用withScriptjs。但是我该如何把所有这些放在一起呢？

如何将 react-google-maps 与Google Places API一起使用，在地图上显示来自 Google 的“酒店”标记？

下面是我的代码：

我想从我的服务器获取坐标（多边形路径）。以下是我为获得它所做的工作。它是一个组件：

从 fetchBoundaries() 函数，我可以得到我的坐标。但是，它不能将其传递<Polygon path={coordinates} />给显示。

有谁知道出了什么问题？

我在反应应用程序中使用react-google-maps和位置自动完成。

在页面加载时，我收到了臭名昭著的消息：

“您在此页面上多次包含 Google Maps API。这可能会导致意外错误。”

重复一遍，我通过模块使用地图，而不是直接包含<script>标签。克服这种情况的最佳方法是什么？

我在 github 上发现了这个问题，这似乎是相同的情况，具有不同的库，但它们过于深入地了解其库的细节（“传单”）。我想知道是否有更通用的解决方案。

我有一个 React-Google-Maps 组件，它允许用户绘制多边形并通过回调将这些多边形的关联 GeoJSON 传递给父组件。

我想做的是将用户一次限制为一个多边形；这意味着，当用户完成一个多边形时，所有先前渲染的多边形都将被删除。

我已经看到了一些关于如何使用 vanilla JS、jQuery 和 Angular 2 执行此操作的示例，但在 React 上没有。

我的组件：

我正在使用react-google-maps显示带有标记的地图，当您单击标记时，所有信息窗口都会打开。当我点击它时，我想只显示一个标记的信息窗口，而其他的则保持关闭。

这是我的代码：

我用这个打开和关闭信息窗口

我正在映射所有标记，并将它们显示在地图上。我怎么能点击打开一个标记信息窗口？ 这是一个相关的问题，但它不是用 React 制作的，也没有使用 react-google-maps。

我正在尝试做的事情：

能够单击标记并使其显示InfoWindow然后能够再次单击标记以将其关闭或仅手动关闭弹出窗口。还希望能够一次打开多个标记。

什么有效：

我可以单击打开InfoWindow并再次单击关闭窗口。如果我关闭一个标记，然后我可以打开另一个。

什么不起作用：

如果一个标记已经打开，并且我尝试单击另一个标记将其打开，我会得到：

Target container is not a DOM element

The above error occurred in the <InfoWindow> component:

如果另一个标记已打开，则仅当我单击另一个标记时才会发生这种情况。我将在下面发布代码。我已将其分离MapComponent到一个单独的文件中。

地图组件：

反应组件容器：

我的应用程序可以很好地加载我的所有标记，但是当我尝试单击标记时会崩溃。我收到以下错误：“React.Children.only 预计会收到一个 React 元素子项。”

在主地图组件中，我构建地图并从 Firebase 中引入所有标记。我想将标记组件化并将它们构建在一个单独的文件中，只是为了让我的头脑更清楚一些。

这是我的地图组件

在这里，我将标记放在一起。我已将 InfoWindow 组件放置在标记内，然后要求它在单击标记时显示。但是，当我单击标记时，它只会使整个应用程序和白屏崩溃。

这是我的 LotMarker 组件：

我究竟在哪里调用 fitBounds 或 map.fitbounds。一旦我有界限或如何使用它，我很困惑把它放在哪里。我已将边界设置为本地边界状态。

我在react-google-maps 看过这篇文章：如何使用 fitBounds、panBy、panTo、panToBounds 公共 API？要么我只是做不同的事，要么是因为它对我来说没什么用。

我创建了一个boundsconst ，然后每次制作标记时，我都会将其中的每一个添加到边界中bounds.extends(Marker in here)

代码有点乱，所以我会指出我在哪里做的。在里面filterItemsByRadius是我创建和设置边界的地方。在 map 函数的末尾，我认为将边界状态设置为边界。

我有 45k 个 JSON 格式的坐标对象，我想将它们作为标记放在我的地图组件中。

我有以下代码：

如何以最正确的方式实现？

谢谢你的时间。

我在我的反应程序中使用google-maps-react。
有什么方法可以在绘制的标记之间绘制折线
吗？有什么方法可以在标记之间画线吗？