问题标签 [google-map-react]

我有一个 Reactjs 应用程序，我在其中使用 google-map-react 库生成地图。我在从通过浏览器获得的地理位置集中地图时遇到问题。加载页面时，地图的中心位置与我的位置不同。

我有以下代码：

纬度和经度数据被正确接收，但是我上面提到的问题正在发生。我尝试在navigator.geolocation.getCurrentPosition的await方法中使用async(componentDidMount)，但没有成功。

Tech Stack - Google Map Directions Api、React JS 等。

问题陈述- 使用谷歌地图方向 Api 我正在绘制 3 个引脚，即起点、航点和目的地。我能够绘制所有这些，但无法为每一个添加自定义标记。任何帮助/建议将不胜感激：-

代码片段： -

谢谢

我已经制作了标记，因此它可以在地图上拖动。我正在尝试从标记中获取坐标，以便将它们保存到我的数据库中。下面是代码，是否有一个函数可以让我从拖动标记时获取坐标。或者我应该使用另一个谷歌地图反应库。

我正在使用 google-map-react 使用 GPS 位置为路径渲染谷歌地图。目前，我正在用单色渲染路径。

我想根据速度改变线条的颜色。有没有办法根据某些标准更新路径样本的颜色？

目前，我只看到如何为整个路径设置颜色：

指定path为：

是否可以将每个事件设置为路径的颜色？

CSP 问题：

我们的项目有严格的内容安全问题，即我们正在使用style-src *并且无法在unsafe-inline此处添加选项。我收到“拒绝应用内联样式错误”，并且由于上述严格的内容安全政策，CSS 未应用于谷歌地图。

重现步骤

1）克隆创建反应应用

2)安装google-map-reactv2.1.9

public/index.html3）在文件内部添加内容安全策略标头

4. 使用来自谷歌地图反应库的内联样式道具
5. 创建构建并在 localhost 上提供它。

预期行为:: 谷歌地图不应该抛出内联样式错误并且应该应用样式。

不重复，因为：因为我专门使用“google-map-react”npm 包来处理 Google Maps API，所以我不认为这是一个重复的问题。这更多是关于“google-map-react”包的问题，​​而不是 Google Maps API。

问题：

GoogleMapReact 组件（来自“google-map-react”npm 包）由于某种原因错误地检测到点击事件的位置。具体来说，它的“onClick”事件对象具有不正确的 lat/lng 值。坐标总是移动到东南部（或右下角），误差幅度似乎与缩放级别有关......即。当缩小到远处时，纬度/经度的误差是数百公里，并随着地图的放大而减小。另一种看待它的方式是，坐标总是在屏幕上移动相同的 x 和 y 像素量。

关于潜在解决方案的注意事项：

我对这个包在后台访问的谷歌地图 API 了解不多，我更喜欢使用“google-map-react”包的解决方案，这样我就可以在基础谷歌地图上维护该抽象层API。

语境：

我正在使用“google-map-react”版本 2.1.3。

我正在构建下一个 js 应用程序。在这里，我面临一个问题。我有一个这样的后端api-

这是我的组件-

这里的中心值-

当我硬编码 lat 和 lng 时，地图显示完美。 但我想从后端信息中显示中心纬度和经度，例如 -

然后它不显示地图。它只显示像图像一样的白屏-

我必须做的。为动态中心。在这里，如果标记远离中心点，我不给动态中心然后标记转到地图的外部。这就是为什么需要为中心赋予动态价值的原因。

我正在构建下一个 js 应用程序。在这里，我面临一个问题。我有一个这样的后端api（在getServerSideProps的服务器端获取的api）

我正在构建下一个 js 应用程序。在这里，我面临一个问题。我有一个这样的后端api-

“房间”：[{“id”：“6178f32148cdaf9caad775a5”，“名称”：“凯尔莫特别墅”，“纬度”：“22.7562851”，“lng”：“90.4109839”}]

这是我的组件-

这里的中心值-

当我硬编码 lat 和 lng 时，地图显示完美。

但我想从后端信息中显示中心纬度和经度，例如 -

然后它不显示地图。它只显示像图像一样的白屏-

任何人都可以帮忙吗？我面临这个问题1个月！

我的应用程序通过 AWS IoT 有实时数据流。数据包括我想在谷歌地图上绘制的纬度/经度坐标。我目前正在使用 google-map-react，但如果这个库无法处理我需要的内容，我会向其他库开放。

这是我需要的：

1. 如果没有数据点，我希望地图是整个世界的视图。如果无法实现，我想展示一个地区（美国、欧洲等）。
2. 当佛罗里达州迈阿密的数据点带有纬度/经度坐标时，我希望地图能够自动调整，以便放大迈阿密市。
3. 当另一个数据点带有华盛顿特区的纬度/经度坐标时，我希望地图自动缩小，以便现在在地图上可以看到两个标记。

工作原理- 此时，我可以让标记/点出现在地图上。

什么不起作用- 当新标记从 AWS IoT 流入时，我无法让地图自动重新调整。当不存在标记/点时，我也无法让地图显示整个世界的视图。

关于如何解决这些问题的任何想法？任何帮助，将不胜感激！

这是我实现的代码：

我有打字稿 + React 应用程序。我正在使用 google-map-react 库。它非常易于使用，我喜欢它。到目前为止，我能够嵌入地图并将自定义点放在特定位置的地图上。我想要的是通过点击这个点在谷歌地图上获得这个地点的方向。我不在乎谷歌地图是否会在新标签页中打开等等。我在想的是通过知道 lat 和 lng 生成这个特定位置的链接并重定向到它。但是如何生成这个链接呢？

是否有图书馆固定装置或谷歌 Api？