问题标签 [google-maps-react]

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 投票
0 回答
80 浏览

css - React 组件不会与 react-bootstrap 导航栏对齐

我正在尝试在Navbarusing下对齐和调整反应组件的大小react-bootstrap v0.33.1。我希望地图具有组件的整个宽度Navbar并在其下方居中对齐。但是,无论我如何放置组件,它都会执行以下操作之一:

  1. 如果我使用<Grid>and<Col>组件来包裹<Map>组件,那么地图太靠右了。

在此处输入图像描述

  1. 如果我删除<Grid> and then I end up with the` 组件是我的设备屏幕的整个宽度。

在此处输入图像描述

以下是其他组件:

我不知道问题是什么,这个简单的问题是如此痛苦。使用负边距值似乎是修复场景 1 的错误方法,使用固定宽度px似乎对于场景 2 的不同屏幕尺寸来说不是动态的。谢谢。

0 投票
3 回答
90 浏览

javascript - 如何用两个值动态渲染/加载我的数组?

我是 Java Script 和 ReactJS 的初学者,我正在做一个项目来提高我的知识。

我将在地图上渲染一些多边形点,我正在使用该google-maps-react库。

我有一个关于多边形的问题,为了能够在地图上绘图,我必须以这种方式发送数据:

问题是我拥有的坐标格式不同。它们采用以下格式:

如您所见,它们是不同类型的对象,它们知道如何告诉我是否有任何 javascript 函数可以让我以与库模型相同的方式保留坐标数组google-maps-react

我希望我的数组看起来像这样:

我没有办法一个一个地改变这个数据,我坐标的原始文件有将近八千行,所以我需要一个自动执行此操作的函数。

这是我尝试使用的原始数据:https ://gist.githubusercontent.com/bernalvinicius/6213d045e6f1c360008489bb416e58b5/raw/b8b997bb7e8d640a41a76ae0214663499fe1d8e5/coordinates.json

谢谢!!

0 投票
1 回答
120 浏览

javascript - 如何返回所选多边形的坐标?

我正在使用google-maps-react在地图上渲染具有多个多边形的数组。

当我单击一个多边形时,我希望它返回该选定多边形的所有坐标。你能告诉我我该怎么做吗?

这是我如何在地图上渲染坐标的图片:

在此处输入图像描述

如果可能的话,我还想要其他东西,以便hover在我将鼠标悬停在每个多边形上时添加一个事件。与我在互联网上找到的视频相同:https ://recordit.co/MciFGBL3b7

这是我放在codesandbox的代码:https ://codesandbox.io/s/blissful-herschel-25rsl?file=/src/App.js

提前致谢。

0 投票
2 回答
542 浏览

javascript - 样式化 google-map-react 地图

我正在构建地图google-map-react并尝试对其进行样式设置,但没有运气。我在这里使用文档:https ://github.com/google-map-react/google-map-react/blob/master/API.md并通过一个名为的道具添加样式,options就像它说的那样,但我没有看到任何正在应用的样式。

这是我的代码:

任何有关如何应用任何样式的指导将不胜感激。

注意- 我正在使用开发人员密钥,不确定这是否是我看不到样式的原因?

另请注意- 我不想要react-google-maps类似库的提示,但与google-map-react. 我已经看到其他google-map-react问题得到了回答,并与提到的人一起投票react-google-maps

0 投票
1 回答
300 浏览

javascript - 如何从我的多边形返回/获取坐标?

google-maps-react用来在地图上渲染多边形。

当我单击一个多边形时,我希望它返回该选定多边形的所有坐标。你能告诉我这是否可能吗?

这是我在codesandbox中输入的代码:https ://codesandbox.io/s/falling-tree-ikvq1?file=/src/index.js

这是我绘制地图的地方:

提前致谢。

0 投票
1 回答
106 浏览

javascript - 如何从选定的多边形切换填充颜色?

google-maps-react用来在地图中绘制一些多边形。

我想向用户展示他选择的多边形。问题是当用户选择多边形并单击另一个多边形时,似乎有两个选定的多边形,有两个具有蓝色背景的多边形。

你能告诉我如何在多边形之间进行切换吗?如果用户单击另一个多边形,则第一个多边形将返回其原始颜色。

这是我放入codesandbox的代码

渲染我的地图:

处理点击事件:

显示图像可以更轻松地查看正在发生的问题:

在此处输入图像描述

先感谢您。

0 投票
1 回答
679 浏览

reactjs - 谷歌地图反应多边形问题

我正在创建一个应用程序,它使用来自 API 的野火数据并翻转它,以便使用 google-maps-react 包在 Google 地图上显示多边形。我已经弄清楚了一切,直到使用地图组件中内置的函数返回和显示多边形。有人想插话可能是什么问题吗?我真的很感激一些帮助。谢谢。

0 投票
1 回答
1583 浏览

javascript - 如何更新 google-maps-react 方向路线?

我有坐标数组,如果我在数组中添加另一个坐标,则应该更新地图的路线方向。

这是我在 googlemap.js 中的代码

我在这个插件中有点新,因为我在过去几天使用 react-google-maps 但它不再被维护这就是我现在使用这个插件的原因。

0 投票
1 回答
144 浏览

reactjs - 尝试使用多个 API 调用响应推送到状态变量

我第一次使用谷歌地图 API 并设法最终将地图呈现到屏幕上,我现在正在努力添加我从应用程序中其他地方收到的位置标记。当我遍历这些位置以获取它们各自的纬度和经度坐标时,我想将它们添加到我的状态变量中。目前我有我的代码的方式,我得到一个响应,它被存储在我的状态变量中,但它只存储最近的一个而不是全部。

将所有这些来自 API 的单独响应添加到我的状态变量的最佳方法是什么?

这是我目前的代码

0 投票
1 回答
566 浏览

javascript - 谷歌地图上的多个标记与 .map 反应

我目前正在尝试遍历数组并在我的反应应用程序中的谷歌地图上显示多个标记。我首先必须通过地理编码 api 运行位置以获取 lat 和 lng,然后设置一个状态变量来映射以获取要显示在地图上的标记。我目前在我的代码中的某个地方遇到问题,似乎无法找到问题所在。

我知道当我 console.log 我的状态变量时,它似乎多次运行日志,前几个是空数组,最后几个包含我需要的数据。我很新的反应,仍然试图掌握它。

另外我认为我的 .map 函数在设置状态变量之前正在运行,我不确定如何重构来解决这个问题。

这是我的代码 -