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

如何解决在从 Firestore 文档获取的 MapView 中显示标记

背景

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

问题

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

longitude:

然后：

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> 或 data，我会从文档中获得所有信息。 e 对象以这种方式登录到控制台：

latlng

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

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

我怎样才能删除它？我已尝试对其进行解析以查看会发生什么，但收到以下错误消息：coordinate={{latitude: latitude,longitude: longitude}} 。当然，这是不行的。

问题

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

JSON Parse error: Unexpected identifier "object"

解决方法

我没有看到第二部分，但在这之前我可以看到你犯了一个小错误，即没有从 Marker 的循环中返回 anthing。 你代码

  {data.map((e,i) => {
        <Marker 
          key={i} 
          coordinate={e.latlng}
          title={e.name}
          pinColor='#5436FF'
          />
          
      })
    }

尝试更换

  {data.map((e,i) => (
        <Marker 
          key={i} 
          coordinate={e.latlng}
          title={e.name}
          pinColor='#5436FF'
          />))
    }