如何将坐标数组映射到React Native Maps Markers？

Question

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

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