问题标签 [react-google-maps]

我试图将 InfoWindow 添加到折线的中点。

这是我显示信息窗口的代码。

这里的 windowPosition 是折线中点的 lat 和 lng。当我尝试运行它时，我收到一条错误消息You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>。但是 repo 的所有者说（链接在这里）如果我们将一个位置作为我正在做的道具传递，我们可以在任何我们想要的地方渲染一个 infoWindow。

任何帮助表示赞赏。

我试图通过分配一个全局定义的数组 salesPropertyInfoWindowOut 来更改 salesPropertyInfoWindowIn 的状态。

的初始值

onMarkerClick 方法更改作为参数传递的索引的值，然后在 salesPropertyInfoWindowIn 中分配该值。但是，这不会重新渲染地图。请通过提出一些解决方案来帮助我。

刚开始使用react-google-maps，想知道在使用withScriptsjsHOC 时需要使用哪些属性 loadingElement、containerElement 和 mapElement。如示例所示，它们是否严格用于样式？同样，我不确定这些属性的用途。

我在地图上有多个标记，但每次单击标记以获取信息窗口时，所有标记信息窗口都会打开！

我可以看到问题所在，我最初并没有告诉它要加载哪个窗口。我已经尝试将索引传递给它，但这对我不起作用。

这是我目前拥有的：

我从 json 文件中获取一些数据，并使用 .map 将这些点放在 reactjs 中的谷歌地图上，一切都很好。但是对象中的某些项目没有任何值，如果它们被调用，它们会抛出：'TypeError: Cannot read property 'category' of null'。我不应该只是能够在返回中执行以下操作：

我试图了解 Reacts 状态，我想知道这是否是预期的行为。

所以我有一个表单，在表单提交时我触发了一个函数，这个函数接受一个地址并将其转换为 lat 和 lng 并将其吐出到一个 json fetch 调用中，该调用获取地图的一些标记位置。

我注意到的是，当我 console.log 渲染表单提交中的标记时，首先记录旧对象，然后记录它返回的新对象，每次提交表单时都会这样做。这是正常的吗？当我在函数中 console.log 时，我只会得到旧状态。

这是我的代码： http: //pastiebin.com/embed/5a8da508b22c8

更新：将代码添加到站点而不是 pastebin：

我正在关注有关使用 Google Maps api 实现 React 的在线教程。我一直在尝试构建我的地图组件，并且完全按照交付的说明进行操作。但是，当我尝试在浏览器中加载我的页面时，没有显示任何内容，并且存在一些我难以解决的控制台错误。

下面是我的简单 HTML 页面

这是我的 app.js 文件

下面是我认为导致问题的 Map.js 文件。

这是我的 webpack.config.js 文件，它将我的 JSX 代码转换为 ES2015

这是一个小提琴，其中包含链接到我的 html 页面的 bundle.js 代码。

包含 bundle.js 代码的小提琴

当我尝试在浏览器中打开时，我收到以下控制台错误

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map. 在 Map 中（由 App 创建）在 div 中（由 App 创建）在 div 中（由 App 创建）在 App 中 invariant.js:49 未捕获错误：元素类型无效：需要字符串（用于内置组件）或类/功能（用于复合组件）>但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Map. 在 reconcileChildFibers (react-dom.development.js:7635) 在 reconcileChildrenAtExpirationTime 的 reconcileSingleElement (react-dom.development.js:7531) 的 invariant (invariant.js:42) (react-dom.development.js:7756) 在 reconcileChildren (react-dom.development.js:7747) 在 finishClassComponent (react-dom.development.js:7881) 在 updateClassComponent (react-dom.development.js:7850) at beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224) react-dom.development.js:9747 组件出现上述错误：in Map (created by App) in div（由 App 创建） in div（由 App 创建） in App

react-dom.development.js:10994 未捕获的错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于>复合组件）但得到：未定义。您可能忘记从定义它的文件中导出>您的组件，或者您可能混淆了默认导入和命名导入。

检查Map. 在 reconcileChildFibers (react-dom.development.js:7635) 在 reconcileChildrenAtExpirationTime 在 reconcileSingleElement (react-dom.development.js:7531) 在 invariant (invariant.js:42) 在 createFiberFromElement (react-dom.development.js:5753) (react-dom.development.js:7756) 在 reconcileChildren (react-dom.development.js:7747) 在 finishClassComponent (react-dom.development.js:7881) 在 updateClassComponent (react-dom.development.js:7850)在 beginWork (react-dom.development.js:8225) 在 performUnitOfWork (react-dom.development.js:10224)

我以为问题出在 GoogleMapLoader 上，这就是我为 react-google-maps-loader 添加导入的原因，但显然不是这样。我也从使用 Webstorm 切换到 Sublime Text，因为我读到 Webstorm 在将 JSX 转换为 ES2015 代码时存在问题，但这也不是问题。有什么我想念的吗？

我正在使用 React Google Maps。我正在尝试获取所有合同的纬度和经度坐标，以便我可以将每个合同绘制为谷歌地图上的标记。

这是我目前正在使用的代码：

上面的代码为每个合约生成了一张地图，这不是我想要的。

这就是我试图在一张谷歌地图中绘制所有标记的方法：

谁能告诉我为什么上述方法不起作用？

我正在尝试使用 react-google-maps 包显示带有可拖动标记的地图，该地图具有显示标记位置地址的信息窗口。

到目前为止，它可以工作并且可以检索地址并显示它，但是我遇到了整个地图重新渲染的问题，而实际上只有标记信息窗口需要重新渲染。

这可能是因为我在handleOriginMarkerChange() 中设置originaddress 和坐标时更改了地图组件的状态，它们存储在地图组件状态中。我是新手，不确定解决此问题的正确方法，因此任何指向正确方向的方法都会有所帮助！

下面是我的Map.js的代码

我对带有 DirectionRenderer 的 react-google-maps 地图有疑问。我尝试以多种方式传递方向道具，但我总是收到此错误：

InvalidValueError：setDirections：在属性路由中：不是数组

我定义如下：

然后通过这里但得到描述的错误

我还有另一个问题：我收到此错误：

您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。

我在 public_html/index.html 以及 googleMapURL 上的组件 MapWithADirectionsRenderer 上包含脚本标记到 googleMapURL 请求的参数，如官方示例（https://tomchentw.github.io/react-google-maps/#directionsrenderer）。我无法删除 index.html 上的脚本，因为如果我删除它，我会收到 'google undefined error' 。我在文件的开头使用了 /*global google */ 我使用 'new google.maps..ecc 就像在另一个堆栈溢出帖子中描述的那样。