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

react-google-maps - react-google-maps:尝试为每个标记创建一个可切换的信息窗口

我知道以前曾在 SO 上提出过类似的问题,但我已经尝试在答案中实施解决方案,但似乎没有任何效果。

所以,这就是我遇到的问题:我正在使用 react-google-maps 生成地图。地图有多个标记。每次单击特定标记时,我都希望弹出一个信息窗口。问题是,现在,每次我单击标记时,都会弹出所有标记的信息窗口,如下所示:

在此处输入图像描述

您是否愿意浏览一下我的代码并告诉我问题所在:

0 投票
1 回答
397 浏览

javascript - 如何在 ReactJS 上预览谷歌地图

我真的是 ReactJS 的新手。我只想在收到降雨数据时可视化保加利亚的地图并在每个城市中设置标记。现在我尝试使用此链接中的示例:React google-maps

但是将代码放入我的文件时出现错误:

可能错误非常小,但我不知道如何修复它。

我的代码:

0 投票
2 回答
6816 浏览

reactjs - html2canvas 动态呈现的 div

我正在尝试使用html2canvashttp://html2canvas.hertzen.com)截取包含谷歌地图视图的页面的屏幕截图,但我遇到了一个问题,即生成的屏幕截图是白色的,除了标记。(可能)使问题复杂化的是我正在(试图)创建一个 React 应用程序。

我使用此代码截取屏幕截图:

这是我要截屏的页面: 页面截图

上面的代码生成以下图像:

生成的屏幕截图

如您所见,它会生成屏幕截图并捕获标记和底部的“Map Data ©2018 Google”,但是生成的屏幕截图仍然是空白的。

在他们的 Github 上的文档中,我在这里看到了一个预加载选项:https ://github.com/niklasvh/html2canvas/wiki/Documentation#preload-content

然而,这似乎已经从0.5.0 beta版本库中删除了——它们现在在 中1.0.0 alpha,所以回到这样一个过时的库并不是一个真正的选择。

如何告诉 html2canvas 在截屏之前等待 GMaps 组件被渲染?

0 投票
1 回答
310 浏览

javascript - 防止在鼠标位于 InfoBox 内时拖动地图(但也允许突出显示文本)

我正在使用react-google-maps,并且我有一个在标记单击时打开的信息框,其中包含一些文本和输入字段。

我有一个两难境地,我很困。我想允许用户突出显示输入字段中的文本(在信息框内)。

目前,在 InfoBox 中突出显示/拖动鼠标将平移底层地图。

我知道谷歌地图有一个gestureHandling选项,如果设置为'none',将阻止拖动。这对我来说是不可能的,因为当鼠标在 InfoBox 内时将gestureHandling 设置为“none”也会阻止点击和选择输入字段。

我已经尝试过<GoogleMap onDrag />了,但是拖动事件并没有为我公开一个“事件”来以某种方式做event.stopPropagation()。因此,是否可以选择性地仅关闭地图平移,同时允许在 InfoBox 组件中突出显示文本?

示例: https ://codesandbox.io/s/l2mymj912m

我确实enableEventPropagation设置为true. 将其设置为false启用突出显示,但会阻止像onClick.

0 投票
2 回答
10666 浏览

javascript - 如何使用 react-google-maps 通过单击在地图上添加标记?

我正在努力寻找一个非常简单的示例,说明当用户使用基于组件的 React-google-maps 在地图上单击鼠标左键时如何将标记添加到 Google 地图。需要帮忙。

0 投票
1 回答
1064 浏览

google-maps - 在 react-google-maps 中设置默认标记图标的大小

我正在使用 react-google-maps 库并希望显示默认标记,但大小不同。我知道我可以使用自己的自定义标记并设置其大小,但这不是我想要的。这是否可以更改默认标记的大小?

0 投票
1 回答
694 浏览

reactjs - react-google-maps 定位销卡在错误的地方

我的应用程序中有一个react-google-maps实例,它在谷歌地图上绘制了多个位置图标。当有多个图标时,有时,一个具有不同位置的图标会卡在另一个图标上。新图标不可点击,并在稍微轻推地图后自动删除(见下图)
IMO,问题在于谷歌地图绘制多个位置图标。任何想法,我该如何解决这个问题?

这是我在组件安装时设置状态的方式

convertEntityStructureToComponentState()函数如下所示:

}

链接到 Github 问题:https
://github.com/tomchentw/react-google-maps/issues/805 链接到位置地图组件的要点:https ://gist.github.com/arximughal/f91b7a922a4711e25ef82ed9ac6427b5

带有多个图标的 react-google-maps 问题

0 投票
1 回答
6459 浏览

javascript - 用户单击标记图标时如何更改谷歌地图标记图标

我使用 tomchentw react-google-maps 创建了谷歌地图。默认情况下,标记图标显示红色标记图标,但每当用户单击标记图标时,它应该变为灰色标记图标,并且还会增加标记图标的大小。我怎样才能改变它?

单击我的标记图标时,它应该更改其图标和大小。

0 投票
0 回答
776 浏览

reactjs - 使用 react-google-maps 进行基于文本和基于边界的搜索

我正在使用react-google-maps添加具有搜索功能的地图,该地图显示附近,获取 POI 作为标记并在其下方呈现这些地点的列表(a-la Airbnb)。这个相关问题涵盖了我的大部分目标,但在从自动完成下拉菜单中选择后,我似乎无法SearchBox重新居中地图。

这是我到目前为止所拥有的:

我对 React 还很陌生,但似乎实现这种应用程序的所有其他资源都已过时/不推荐使用。提前致谢!

0 投票
1 回答
964 浏览

javascript - 反应谷歌地图自定义标记旋转

我正在尝试在 React Google Maps 中添加一个自定义标记,并让每个标记根据项目在道路上前进的方向旋转。

当我使用pathsvg 而不是url引用图像时,我能够使旋转工作。问题path是我无法fillColor上班,只有strokeColor. 拥有一个复杂的形状也很好,并且path在某种程度上限制了您可以添加到它的形状类型,因为不能将多个路径传递到字符串中。

请注意,这heading是通过我的 api 获得正确的方向,并且我已经验证它可以工作。

这是我当前的代码,不胜感激。谢谢!