问题标签 [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.
javascript - 如何在 ReactJS 上预览谷歌地图
我真的是 ReactJS 的新手。我只想在收到降雨数据时可视化保加利亚的地图并在每个城市中设置标记。现在我尝试使用此链接中的示例:React google-maps
但是将代码放入我的文件时出现错误:
可能错误非常小,但我不知道如何修复它。
我的代码:
reactjs - html2canvas 动态呈现的 div
我正在尝试使用html2canvas
(http://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 组件被渲染?
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
.
javascript - 如何使用 react-google-maps 通过单击在地图上添加标记?
我正在努力寻找一个非常简单的示例,说明当用户使用基于组件的 React-google-maps 在地图上单击鼠标左键时如何将标记添加到 Google 地图。需要帮忙。
google-maps - 在 react-google-maps 中设置默认标记图标的大小
我正在使用 react-google-maps 库并希望显示默认标记,但大小不同。我知道我可以使用自己的自定义标记并设置其大小,但这不是我想要的。这是否可以更改默认标记的大小?
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
javascript - 用户单击标记图标时如何更改谷歌地图标记图标
我使用 tomchentw react-google-maps 创建了谷歌地图。默认情况下,标记图标显示红色标记图标,但每当用户单击标记图标时,它应该变为灰色标记图标,并且还会增加标记图标的大小。我怎样才能改变它?
单击我的标记图标时,它应该更改其图标和大小。
reactjs - 使用 react-google-maps 进行基于文本和基于边界的搜索
我正在使用react-google-maps添加具有搜索功能的地图,该地图显示附近,获取 POI 作为标记并在其下方呈现这些地点的列表(a-la Airbnb)。这个相关问题涵盖了我的大部分目标,但在从自动完成下拉菜单中选择后,我似乎无法SearchBox
重新居中地图。
这是我到目前为止所拥有的:
我对 React 还很陌生,但似乎实现这种应用程序的所有其他资源都已过时/不推荐使用。提前致谢!
javascript - 反应谷歌地图自定义标记旋转
我正在尝试在 React Google Maps 中添加一个自定义标记,并让每个标记根据项目在道路上前进的方向旋转。
当我使用path
svg 而不是url
引用图像时,我能够使旋转工作。问题path
是我无法fillColor
上班,只有strokeColor
. 拥有一个复杂的形状也很好,并且path
在某种程度上限制了您可以添加到它的形状类型,因为不能将多个路径传递到字符串中。
请注意,这heading
是通过我的 api 获得正确的方向,并且我已经验证它可以工作。
这是我当前的代码,不胜感激。谢谢!