如何将一组坐标映射到 React Native Maps Markers？答案

【问题标题】：How can I map an array of coordinates into React Native Maps Markers?如何将一组坐标映射到 React Native Maps Markers？
【发布时间】：2020-03-26 02:15:23
【问题描述】：

我想将一组地理坐标映射到 React Native Maps Markers（即引脚）。我正在映射的数据数组有大约 100 个值。因此，我预计要呈现 97 个标记（API 数据并不完美）。但是，谷歌地图上出现 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

【问题讨论】：

标签： javascript arrays react-native mapping react-native-maps

【解决方案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

【讨论】：

谢谢@Lenoarod，它成功了！一旦 Stack Overflow 允许，我将把它作为公认的答案。