问题标签 [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 回答
3182 浏览

reactjs - react-google-maps:无法获得界限

我有以下反应组件,它从“react-google-maps”库加载 GoogleMap。我正在关注文档示例,但 getBounds() 函数未定义。我认为这是由于试图在地图完全加载之前获得边界但找不到解决方案。

提前致谢

0 投票
2 回答
4218 浏览

reactjs - React Google Map DirectionsRenderer 问题

因为我想创建从我当前位置到 React 中特定点击标记的路线。为了实现这一点,我正在使用 React Google 地图库(react-google-maps)和它的方向示例(Direction Example),但不幸的是我无法new google.maps.DirectionsService()在 React 组件中调用方法。它给了我错误,因为谷歌是未定义的。同一场景已经存在未解决的问题(谷歌未定义

0 投票
2 回答
10050 浏览

reactjs - react-google-maps:如何使用 fitBounds、panBy、panTo、panToBounds 公共 API?

根据React Google Maps library,您可以从 ref 对象调用这四个方法。

看起来很奇怪的是,这些方法应该接收两个参数,一个映射实例和其他参数,如下所示:

但是,当以这种方式调用 fitBounds() 时,地图上不会发生任何事情,不会更改边界,也不会引发错误。这是我构建组件的方式,在 componentDidUpdate 中调用 fitBounds:

知道在这种情况下调用 fitBounds() 的正确方法是什么吗?在这方面似乎缺乏文档和示例。

0 投票
1 回答
330 浏览

reactjs - 从 tomchentw/react-google-maps 导入 DrawingManager 对于 create-react-app 失败

在通过 create-react-app 创建的应用程序中使用

将失败并显示错误消息

由于 create-react-app 使用严格定义的构建过程,因此我对所使用的功能几乎没有影响。该应用程序支持对象传播。

这是在 上tomchentw/react-google-maps还是在 上的问题react-google-maps side?我可以在不弹出的情况下运行它吗?

(我问这个问题对应于回购中要求的 SO问题。)

0 投票
1 回答
1813 浏览

reactjs - 从谷歌地图中的标记获取坐标(纬度和经度)

我开始使用很棒的包 react-google-maps。您能帮我如何从插入(单击)标记中获取纬度和经度值吗?

如果我记录返回的对象,我会得到由纬度和经度组成的范围..但我无法访问范围..

在此处输入图像描述

我使用类似这个例子的东西https://tomchentw.github.io/react-google-maps/进行了一些更改。我想从单击的标记中存储州的纬度和经度。

谢谢你。

0 投票
5 回答
18744 浏览

javascript - 如何使用 react-google-maps 访问 google.maps.Map 对象

我有一个使用https://github.com/tomchentw/react-google-maps的非常简单的反应应用程序,但我很难理解如何获取对我当前地图的引用或如何访问google.maps.Map自定义组件中的对象。

我在 repo 上找到了这个,但是在阅读了这些帖子后,我仍然有点困惑。

我正在从DirectionsRenderer示例开始构建我的应用程序。

我接下来要做的是添加我自己的自定义组件来选择起点并使用 Google Maps 自动完成 API。

是的,我知道这个包已经有一个组件,但我需要做的不仅仅是在地图上搜索一个位置。

为了满足我的需求,我会做类似的事情

node我绑定自动完成功能的元素在哪里,并且mapgoogle.maps.Map对象的一个​​实例。

到目前为止我的申请:

应用程序.jsx

GoogleApiWrapper

如果我无法访问google.maps.Map包装器之外的对象,我也想访问对包含地图的元素的引用,以便我可以实例化一个new google.maps.Map(ref_to_elem, options);

任何帮助将不胜感激!

0 投票
2 回答
1874 浏览

react-google-maps - 设置 Marker 的锚点

我们正在尝试使用 react-google-maps 为我们的标记使用自定义图标。

它正在工作,但是图标的“锚点”似乎默认位于引脚 (0,0) 的左上角,这不适用于我们的图标。

我可以看到直接使用google-maps-api有一个.Point:

但是我们看不到如何在 react-google-maps 组件中设置它。

这是我们的代码:

理想情况下,我们可以直接在 Icon 对象中设置某种锚键。

任何帮助将不胜感激。

0 投票
3 回答
13301 浏览

javascript - 谷歌地图集群自定义图片

我想用自定义图像更改谷歌地图聚类。但是,它不会改变我提供的任何东西。这个 initMap 函数是

https://developers.google.com/maps/documentation/javascript/marker-clustering

我试图用谷歌的一些随机图像来改变集群图像。但是,它不渲染任何东西。

集群不支持自定义集群镜像??

感谢您的帮助@henrisycip

我可以通过提供样式选项来更改集群图像,如下所示。我不确定为什么 imagePath 不做任何事情..

0 投票
1 回答
1549 浏览

javascript - react-google-maps 合并多个多边形

我有一个坐标列表,我要导入我的谷歌地图,然后从中创建多边形,我遇到的问题是多边形相互重叠并且每个多边形的轮廓清晰可见,我需要找到一种方法将它们合并为 1 个多边形,移除所有相交线,并在外部仅留下 1 条边界线。

我的地图 - https://codesandbox.io/s/4ywq78407

我可以看到这可能通过使用这里提到的 geoJSON 数据来实现:

GoogleMaps API V3 构建包含多个邮政编码的多边形

但是我无法找到与 react-google-maps 一起使用的任何示例

看起来也可以使用此处提到的 JSTS 和 wicket:

GoogleMaps API V3 构建包含多个邮政编码的多边形

同样,我不确定如何将这些集成到 react-google-maps

如何使用 geoJSON 数据或 JSTS/wicket 与 react-google-maps 合并我的多边形?

你好.js

谷歌地图.js

0 投票
1 回答
2201 浏览

javascript - Reactjs 无法使用新位置重新加载 Google 地图

我正在尝试使用新输入的位置重新加载谷歌地图,但它没有重新加载。lat和的正确值lng正在从SearchBar组件传回,并且状态正在正确更新。我是新手react-google-maps,所以我不确定是否有其他方法可以更新地图。我假设一旦我更新了状态,谷歌地图就会重新渲染,但事实并非如此。

  1. index.js

    /li>
  2. search_bar.js

    /li>
  3. 地图.js

    /li>