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

Question

我想将地理坐标数组映射到 React Native Maps Markers（即图钉）。 我映射的数据数组大约有 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道具，但无济于事。 任何帮助将不胜感激，因为我从来没有想过这会是一个问题。

单击以获取 React-Native-Maps 文档

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>

你可以看到它的文件