问题标签 [google-maps-react]

我是 ReactJS 的新手，但熟悉 React Native。我正在尝试显示一个基本的地图组件。

我的地图组件是

WaterMapView.js

该组件嵌入 MainDashboard.js 中，如下所示：

我的 App.js 组件是：

index.js 是：

我正在使用 React 版本 16.0.0 和 google-maps-react 版本 1.1.0

我收到一个错误并伴有代码转储。错误是：

TypeError：无法读取未定义的属性“数组”

我不包括这篇文章中的转储。如果需要，我可以添加。

这个问题似乎非常基本，因为我什至没有在 WaterMapView.js 组件中看到 console.log 语句“我在这里”。

让我知道我错过了什么。

我正在开发一个反应网络客户端应用程序，该应用程序侦听 gps 坐标的 json 数组并相应地更新地图上的标记（使用google-maps-react）。一切都按预期工作，但是，标记在移动时似乎会闪烁。我认为一个解决方案是减少更新频率并使用类似的东西：marker-animate来平滑标记位置更新。我对反应比较陌生，我不知道如何将标记动画与 google-maps-react 结合起来。

以下是我的应用程序更新标记的方式：

然后在 render()

那么，可以在哪里使用标记动画（或类似的东西）？

我正在使用 google-maps-react 组件，我似乎找不到任何有关如何通过单击地图来动态添加标记的信息。https://github.com/fullstackreact/google-maps-react

我可以用代码很好地添加一个标记，但我希望用户能够通过单击来添加它，并且看不到如何添加该事件侦听器。我已经有一个用于显示标记信息的事件监听器。

它不是可用的功能吗？有人可以指出我正确的方向。

谢谢你。

我的代码：

我是 react 初学者，我正在尝试使用 circle() 和 fitbounds() 让我的所有标记都显示在屏幕上。现在只有第一个标记显示在屏幕上，但是当我缩小时，我可以看到其余的。但是，我希望在运行应用程序时显示所有标记。帮助会很大！我尝试使用 / global google / 然后声明一个 const bounds 存储 google.maps.latLngBounds() 但它给了我一个参考错误，说 google 没有定义。我创建了一个 const 将 google 窗口化，但错误仍然存​​在。由于我对反应知之甚少，因此我不确定我哪里出错了。

此外，当我删除我的 API 密钥时，该代码片段需要在 url 中运行一个 API_KEY。

我正在尝试使用 google-maps-react 绘制曲线。为了做到这一点，我搜索并找到了这个问题“如何在 react-google-maps 中弯曲折线？ ”。在这个问题中，答案是指一个沙盒项目，其中完成了这样的实现。

我试图调整这段代码来为我工作，但我在获取地图的“投影”时遇到了问题，这是计算“点”所必需的，使用

搜索了map组件的props和state，发现里面有“getProjection”方法：props -> google -> maps -> Map -> prototype -> getProjection。

我尝试使用以下方式访问它：

这会导致错误“TypeError：this.props.google.maps.Map.getProjection is not a function”。

使用

mapProjection = {this.props.google.maps.Map.prototype.getProjection()}

导致未定义

我真的被困住了，我不知道如何解决这个问题。你们中的任何人都可以指出我正确的方向吗？非常感谢。

我有 MapContainer：

当它开始我有TypeError：

无法读取未定义的属性“地图”。在此处输入图像描述

怎么了？

我正在尝试通过映射数据库中的位置来放置标记。

我认为只需将Marker我映射数据的位置放在内部，然后在两者之间的返回内部调用该变量Map 就可以了，但它没有用。

我知道它正在正确转换城市，因为当我控制台记录它时，坐标会按预期显示。不知道我做错了什么。

有没有人对为什么会发生这种情况有任何见解？就像，我会采取任何可以提供帮助的信息。

这是我的代码：

我有一个使用“google-maps-react”模块有两个版本的地图的网络应用程序。

所有代码都将在下面提供。

有两个版本（每个版本都在一个单独的 .js 文件中）的意义在于，我想让一个页面像往常一样显示地图，并显示所有标记（也使用位置库）和另一个使用谷歌绘图管理器的页面，没有标记，这允许您放置新的标记或多边形，这些标记或多边形在发送到我的服务器后将在完整地图（第一页）中可用。

现在我的问题是每次我在第一页并转到第二页时，几秒钟后应用程序因“google.maps.drawing”而崩溃是未定义的。但是当我在第二页上启动应用程序时，无论我切换多少次页面，它都不会崩溃。

我不知道为什么会发生这种情况，但我认为它与异步事件有关（？？？）。

有人能告诉我为什么会发生这种情况以及如何解决吗？

PS：如果有人有更好的方法/想法来做这些页面，请告诉我。

代码时间：

带有绘图管理器的地图：

没有绘图管理器的地图

我用google-maps-react建立了一个项目。

我有这个组件结构

我单击 中的一个项目，<LocationList />我希望它使<GoogleMaps />组件中的相应标记反弹（<Marker />由包提供的组件表示）。

所以在<GoogleMaps />组件中我有这个片段：

当我们单击 中的一个项目时，它处于更新currentMarker的状态，它是一个等于 的字符串。<App /><LocationsList />location.title

因此，当我使用 ReactDevTools 时，我看到动画道具在比较为真时正确设置为 1，但它仍然没有反弹。

任何想法？

这是GitHub 上的整个项目。

谢谢！

每次单击地图时，我都会尝试查看 InfoWindow，它将显示一个输入字段和一个按钮，用于将命名位置添加到列表中。现在，我只是想从表单中取出文本，我遇到的问题是单击按钮时如何访问表单？？？！

在 this.map.addListner(this.state.infoWindow, 'domready', someFunctionToBeCalled) 我不知道如何在 React 中访问表单，我搜索了所有我能找到的是：

这甚至可能吗？我错过了什么吗？