将带有坐标的标记上传到 Firebase，并在 React Native 应用程序上向其他用户显示它们

Question

我正在使用 Firebase + React Native 开发犯罪地图。我想在 Firebase 上保存用户在 he/she 触摸地图后生成的标记的坐标（包括其他字段，例如犯罪类型、详细信息等）因此，一旦将标记保存到 Firebase 上，我想在同一张地图上将它们显示给其他用户，同时将前面提到的字段显示为信息。

这可能吗？如果是这样，实现这一目标的最佳方法是什么？用户后端已经实现，包括 google 地图的 react-native-maps 库。

Answer 1

假设您有 2 类用户：

A 组用户：报告犯罪的信息包括犯罪现场位置坐标。
B 组用户：通过即时更新地图上的犯罪现场来监控举报的犯罪。

使用 Firebase 的 Firestore，创建一个名为 crimes 的 collection，应用程序将 GROUP A USER 报告的新报告犯罪添加为 document。

每个犯罪 document 必须包含犯罪现场位置的坐标。react-native-maps 有 onPress 个事件道具，其 return 在地图上用户点击的坐标.

犯罪的 document 应该是这样的：


const crime = {
type:"CRIME_TYPE",
coordinates:{
longitude:30,0988,
latitude:-1.98777,
//... more details
}

当用户报案时添加此文档

// Define reported crime document information
const crime = {
type:"CRIME_TYPE",
coordinates:{
longitude:30,0988,
latitude:-1.98777,
}
//... more details
}


// Firestore crimes collection reference
const  crimesRef  = firestore.collection('crimes')

// add new reported crime document in collection
crimesRef.add(crime)

在此阶段，用户已举报（提交）犯罪。我们需要通知 B 组用户有关新报告的犯罪。

B 组用户应订阅 crimes 集合，尤其是在添加新文档时。

firestore.collection("crimes")
    .onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
            if (change.type === "added") {
                console.log("New reported crime: ", change.doc.data());
                // add logic to update map with new reported crime data

            }
            if (change.type === "modified") {
                console.log("Modified crime : ", change.doc.data());
            }
            if (change.type === "removed") {
                console.log("Removed crime: ", change.doc.data());
            }
        });
    });

我没有涵盖所有实施细节，这只是一个简短的概述。

将带有坐标的标记上传到 Firebase，并在 React Native 应用程序上向其他用户显示它们

Upload markers with coordinates to Firebase and show them to other users on React Native app

android

google-maps

google-maps-markers

firebase

react-native