问题标签 [react-google-maps]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1288 浏览

reactjs - 超级表达式必须为 null 或函数,而不是未定义 - react-google-maps

每当我导入此 @react-google-maps 库时,我都会收到此错误。谁能帮我解决这个问题?

这是我的组件-

我正在使用 react 16.3.2 reactjs 版本。

0 投票
1 回答
1298 浏览

javascript - 折线未在 react-google-map 上呈现

我正在为多种类型的几何 POINT、LINESTRING、POLYLINE 等制作地理数据可视化器,方法是根据类型动态生成 .

基本上数据是这样的,正常的geojson等。

构建圆形时可以完美渲染,但是当它切换到折线时它永远不会显示。

当硬编码输入path并从数据源派生时。我打算为 Polygon、MultiPolygon 等做这个。

0 投票
0 回答
70 浏览

reactjs - 如何在 ReactJS 中自定义谷歌地图

我是 ReactJS 的新手。我通过引用此链接使用了地图

它工作正常。我在搜索栏中检测到我的位置图标。单击时,我能够检测位置并控制基于纬度和经度的格式化地址。我怎么想在搜索位置输入框中显示地址。我如何做到这一点?

应用程序.js

0 投票
0 回答
87 浏览

reactjs - 如何在地图上显示起点和终点之间的替代路线?

这是我使用的代码。我产生交替的根和不同颜色的油漆。但是屏幕不工作。

哪一部分是错的。如果将响应设置为方向,它会绘制一条路径。

https://stackblitz.com/edit/react-alonzm?embed=1&file=index.js

0 投票
1 回答
987 浏览

json - 如何将存储在 JSON 提要中的地图标记添加到现有的 React Google 地图?

我有一个创建地图的 react-google-maps 项目:

这将在地图中心添加一个文本标记。

但是,我无法从在 React 中创建/加载地图后加载的动态 JSON 提要中添加标记。请注意 JSON 提要可能会更新 - 此时标记将被刷新。

在 React 中,我通常这样调用 JSON 提要:

我已经在网上很好地查看了解决方案,但无法在创建/加载地图后弄清楚如何添加动态标记。

任何想法或示例代码将不胜感激。

0 投票
1 回答
485 浏览

reactjs - 使用 DirectionsRenderer 时如何更改点之间的 strokeColor

我正在使用 react-google-maps 在网站中呈现地图。在为 DirectionsService 使用航点时,我对每条线的 strokeColor 有疑问。如何在它们之间更改 strokeColor 以及使用 DirectionsService 后如何回调。这是我的来源相同的例子:

https://tomchentw.github.io/react-google-maps/#directionsrenderer

感谢帮助

0 投票
1 回答
453 浏览

reactjs - 打字稿反应处理道具类型

我正在为 Google 地图 api 使用 react-google-maps 库。根据文档,这是我使用地图的方式:

这里的问题是,当我使用这个组件时,我需要传递道具“数据”,如果 console.log(props) 我可以看到我的数据道具是正常传递的,但是由于我使用的是打字稿,打字稿现在不涉及这个道具,它给了我这样的错误:

基本上我为此创建接口并声明我的数据道具,并创建这样的反应组件:

然后我可以访问必要的道具。这里的问题,如果我尝试通过接口 IProps,我得到这个:

我相信这是因为 compose 方法。

我认为,这里的问题更多是关于 react-google-maps 库及其与 Typescript 的使用,因为我相信它应该在任何其他情况下都可以使用。但可能不是,也许以其他方式声明我的组件有一个技巧。

0 投票
1 回答
2064 浏览

reactjs - 使用 react-google-maps 挂载后向 map/clusterer 添加标记

react-google-maps与 MarkerClusterer 一起使用,我如何在安装地图后从地图/集群中添加和删除标记,例如。当一个按钮被点击或在 onMarkerClustererClick 中?

我试过简单地制作一个新的标记,地图设置为refs.map

以及使用在 react-google-maps 中用于 MarkerClusterer 的 markerclustererplus 中定义的.addMarker()函数,但没有任何效果。

两者都返回错误Uncaught TypeError: Cannot read property '__SECRET_MARKER_CLUSTERER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined


基于示例的代码来自:https ://tomchentw.github.io/react-google-maps/#markerclusterer

0 投票
1 回答
3325 浏览

javascript - React Google Maps InfoWindow 切换一次显示一个

我目前正在使用 react-google-maps,并且可以通过单击标记(从地图或列表中)正确显示标记和 InfoWindow。但是,一旦我单击要打开的标记,即使我选择了新的,以前的 InfoWindow 也会保持打开状态。

反应谷歌地图截图

如果单击列表中的“x”或标记,我可以关闭信息窗口。但我不确定如何自动关闭其他 InfoWindow 并且只打开当前标记的 InfoWindow。

我查看了几个类似的问题以获得一个想法:在地图上显示多个标记时,单击标记时如何只打开一个信息窗口?, React-Google-Map 多个信息窗口打开

但是我仍然无法通过和检查唯一标记,以便只显示与标记 ID 匹配的信息窗口。

0 投票
0 回答
27 浏览

javascript - HOC 函数内的地理编码函数

我正在尝试在地理编码的回调函数中执行 setState 但不可能,所以我该如何执行

在函数内部或等待函数直到完成并获得一些结果,以便将该信息设置为新状态。

提前致谢!