javascript - 如何将坐标数组映射到 React Native map 标记中？

Question

我想将一组地理坐标映射到 React Native map 标记(即图钉)中。我映射的数据数组有大约 100 个值。因此，我期望呈现 97 个标记(API 数据并不完美)。但是，Google map 上出现 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 Prop ，但无济于事。任何帮助将不胜感激，因为我从一开始就没想过这会是个问题。

Click for React-Native-Maps Documentation

Answer 1

你不在 map 函数中返回任何东西，试试这个:

<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