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

Question

背景

我正在尝试使用 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>

如果我去打印 data 或 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,
}

Answer 1

我没有得到第二部分，但在此之前我看到你犯了一个小错误，没有从标记的循环中返回 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'
          />))
    }

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

Displaying Markers in MapView fetched from Firestore Document

firebase

react-native

react-native-maps

google-cloud-firestore