firebase - 在从 Firestore 文档中获取的 MapView 中显示标记

问题描述

背景

我正在尝试使用为应用程序构建地图视图react-native-maps，我在 Firestore 集合中有大量文档，这些文档具有latlng地图字段，同时包含latitude:和longitude:。其中两个是数值。

问题

我无法让标记显示在地图中。我已经能够根据用户位置显示单个静态标记，但无法使用 Firebase 中的数据动态地执行此操作。代码如下所示：

const [loading, setLoading]= useState(true)
    const [data, setData] = useState();
    
    useEffect(() => {
        const subscriber = firebase.firestore()
          .collection('data/')
          .onSnapshot(querySnapshot => {
            const data = [];
      
            querySnapshot.forEach(documentSnapshot => {
              data.push({
                ...documentSnapshot.data(),
                key: documentSnapshot.id,
              });
            });
            
            setData(data);
            setLoading(false)
            
          });

        return () => subscriber();
      }, [])

进而：

        <MapView
            initialRegion={text}
            style={styles.map}
            customMapStyle={mapStyle}
         >
             <Marker
             style={styles.marker}
             coordinate={{
               longitude: location ? currentLongitude : 0,
               latitude: location ? currentLatitude : 0
                        }}
               pinColor='#1FCFAB'
               title={'Vos'}
               description={'Vos'}
                        />
            {data.map((e, i) => {
            <Marker 
              key={i} 
              coordinate={e.latlng}
              title={e.name}
              pinColor='#5436FF'
              />
              
          })
        }
        </MapView>

如果我打印出dataor e，我会从文档中获取所有信息。对象以这种latlng方式登录到控制台：

Object {
  "latitude": -34.581626,
  "longitude": -58.439317,
}

我想标记无法显示在地图中的原因是那里的“对象”一词和括号。这是因为组件希望您输入数据的方式是：

coordinate={{latitude: latitude, longitude: longitude}}

我怎样才能删除它？我已经尝试解析它以查看会发生什么，但我收到以下错误消息：JSON Parse error: Unexpected identifier "object". 当然，这是不行的。

问题

如何将以下代码段转换为可用作 react-native-maps 的纬度和经度的数据：

Object {
  "latitude": -34.581626,
  "longitude": -58.439317,
}

标签： firebasereact-nativegoogle-cloud-firestorereact-native-maps

firebase - 在从 Firestore 文档中获取的 MapView 中显示标记

问题描述

解决方案

推荐阅读