时间戳

首页 > 解决方案 > 如何让 Google 将几何位置数据放入 Firebase

javascript - 如何让 Google 将几何位置数据放入 Firebase

问题描述

我正在使用 React 应用程序在 formik 表单提交时将一些信息存储到 firebase/firestore 中。当用户输入位置时，react-google-autocomplete 会执行自动完成，然后返回格式正确的地址，以及 places.geometry.location 纬度和经度。提交时，我可以使用 JSON.stringify 来控制台日志或警报，但控制台会返回一个 firebase 错误，内容如下：FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom object (found in field orggeometry in the document

形式代码

这显示了我如何编写我的 formik onSubmit 等。

自动完成的输入 ref，显示我的位置值的设置位置

这显示了输入参考，以及如何设置值。我有两个。它们的设置方式，我目前可以在我的两个自动完成输入中选择一个位置并获取纬度和经度数字后提交表单。

在我的 Origin 上工作的经纬度示例

如您所见，表单的值问题为零。问题严格在于firebase。我搜索过 Google 搜索、此网站、Firebase 文档和 Places/Maps 文档。任何帮助将不胜感激。

标签： javascriptfirebaseformik

解决方案

好的，所以在睡了它并花了一些时间研究它之后，我找到了一个解决方案来解决我的问题。问题是它place.geometry.location返回一个同时具有纬度和经度的对象，这是 Firebase 不喜欢的。我尝试 JSON.stringify 整个表单的值，但这并没有修复它，但是按照以下方式重写它可以针对我的特定情况修复它。

const { ref } = usePlacesWidget({apiKey: process.env.REACT_APP_GOOGLE, onPlaceSelected: (place) => {setPlace(place); formik.setFieldValue("Origin", place.formatted_address); JSON.stringify(place.geometry.location) formik.setFieldValue("OriginGeometry", JSON.stringify(place.geometry.location))

现在它返回一个由对象本身组成的字符串，在我看来，对于任何想要一个看起来非常干净的数据库条目的人来说，这不是理想的解决方案，但在我的情况下完全没问题。

推荐阅读