问题标签 [google-map-react]

我在使用google-map-react渲染多个元素时遇到了麻烦。我正在像示例中那样做所有事情，使用硬编码元素一切都很好，但是对于我想使用map像使用常规反应组件那样的方法渲染的元素，我遇到了麻烦。这是一个jsbin 链接，您可以在其中查看它，在地图中我们应该看到 3 个点，但现在我们只有硬编码的一个。

谷歌地图 API 有两个最流行的 React 抽象（从每周的 npm 下载和 github repo stars 来看）。对于像我这样的初学者来说，这是非常令人困惑的，因为我无法决定这些库可以为我的项目带来什么，而不能仅仅通过查看文档来决定什么？简而言之，使用google-map-react和react-google-maps

的优缺点是什么。我没有在互联网或SO上找到任何比较。

使用这个谷歌地图库，从这个链接，我可以在地图上创建一个默认标记。但是，这个 onGoogleApiLoaded() 只会被触发一次。我想始终在地图上居中标记。但是默认标记至少需要一个位置，因此我尝试将默认标记创建为函数并将新位置传递给它，但我无法使其工作。

我有一个将呈现 MapContainer 组件的主要组件。

和一个 onChange 函数来获取新的中心坐标。

在我的 MapContainer 中呈现 GoogleMap：

onGoogleApiLoaded 函数设置地图，地图：

最后是我创建标记的方式：

我得到的错误是： Invariant Violation: Objects are not valid as a React child (found: object with keys {__gm, gm_accessors_, position, gm_bindings_, map,closure_uid_621320123, clickable, visible})。如果您打算渲染一组子项，请改用数组。

任何想法？

这是我的反应地图组件。

但没有任何渲染。为什么？在github页面文档中，他们说parrent元素必须有一个绝对位置'100vh'，宽度：'100％'。什么都没有显示在页面上。

当我有超过 2 个标记时，如何找到地图的中心？当我只有 2 个时，我是这样做的：

但是当我有 5 个标记时，如何计算中心？

谢谢

单击元素时，我正在尝试更新反应组件的本地状态

渲染外部的辅助函数在哪里onChildClickCallback，如下所示：

我已经在回调中编写了上面的 console.log，因为我读过某处状态可能不会立即更新。

但是，无论我传递给状态的值是什么，它都没有得到更新，并且控制台正在记录键和​​项的相同旧值。我在这里想念什么？

更新代码：

你已经有 onChildClickCallback 了。我想在触发 onChildClickCallback 时更新状态并重新渲染组件。

我正在使用谷歌地图做出反应。

我正在尝试将我的 API 中的纬度和经度数据作为标记提取到 Google 地图中。

收到错误“TypeError：markers.map 不是函数”

这是代码片段 -

收到错误“TypeError：markers.map 不是函数”

我创建了一个服务器渲染的react应用程序。在不同的页面中，我尝试从用户那里获取多个地址，并且我想在Google Maps.

出于测试目的（熟悉geocode），我添加了与参考react-geocode完全一样的内容。但是，我收到错误：

ReferenceError: fetch is not defined at /home/.../node_modules/react-geocode/lib/index.js:1:255

这是组件：

有人可以告诉我问题是什么以及如何解决吗？我需要通过fetchAPI（node-fetch）发送请求吗？

I am trying to implement google-map-react but the map is not showing up and I couldn't find the answer to my problem. I have set both height and width and markers are showing up but the map is not. Any idea?

What I see on screen: https://ibb.co/LN1CK3X

我正在寻找一种在我的应用程序中的任何地方使用相同谷歌地图实例的方法。毕竟每次地图加载都是收费的......

我正在使用google-map-react。在 ComponentDidMount 上创建了一个新的Map实例，所以对我来说，第一个要求是保持该组件安装是有道理的，最有可能靠近组件树的顶部。

最终结果应该是任何想要渲染地图的组件都应该：

• 如果尚未安装地图组件，请安装它。
• 以某种方式回收安装地图的 DOM 节点。

对此的任何帮助将不胜感激。