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

【问题标题】：Displaying Markers in MapView fetched from Firestore Document在从 Firestore 文档中获取的 MapView 中显示标记
【发布时间】：2021-01-04 16:50:22
【问题描述】：

背景

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

问题

我无法让标记显示在地图中。我已经能够根据用户位置显示单个静态标记，但无法使用 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"。当然，这是不行的。

问题

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

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

【问题讨论】：

标签： firebase react-native google-cloud-firestore react-native-maps

【解决方案1】：

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

  {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'
          />))
    }

【讨论】：