如何将坐标数组映射到 React Native 地图标记中？

Question

我想将一组地理坐标映射到 React Native 地图标记（即图钉）中。我映射的数据数组有大约 100 个值。因此，我期望呈现 97 个标记（API 数据并不完美）。但是，Google 地图上出现了 0 个标记。这是我的代码：

mapDataToMarkers() {
const searchData = this.props.data;
return (
  <MapView style={styles.mapStyle} mapType={"mutedStandard"}>
    {searchData.map((host, i) => {
        if (host.location.latitude && host.location.longitude) {
          console.log("TEST", host.location.latitude);
          <Marker
            key={i}
            coordinate={{
              latitude: host.location.latitude,
              longitude: host.location.longitude
            }}
            title={host.name}
            pinColor={"#ffd1dc"}
          />;
        }
      })}
  </MapView>
);

console.log() 在我的终端中产生了 97 个纬度，所以我知道数据是正确的并且代码是可访问的。我已经尝试按照文档的建议将一个名为 latlng 的对象传递给 coordinate 道具，但无济于事。任何帮助将不胜感激，因为我从一开始就没想过这会是个问题。

Click for React-Native-Maps Documentation

Answer 1

你没有 return 地图函数中的任何东西，试试这个：

<MapView style={styles.mapStyle} mapType={"mutedStandard"}>
    {searchData.map((host, i) => {
        if (host.location.latitude && host.location.longitude) {
          console.log("TEST", host.location.latitude);
         return(<Marker
            key={i}
            coordinate={{
              latitude: host.location.latitude,
              longitude: host.location.longitude
            }}
            title={host.name}
            pinColor={"#ffd1dc"}
          />)
        }
      })}
  </MapView>

可以看到document

如何将坐标数组映射到 React Native 地图标记中？

How can I map an array of coordinates into React Native Maps Markers?

javascript

arrays

mapping

react-native

react-native-maps