React-native - 循环遍历数组并在地图上创建标记

时间:2018-04-22 18:50:10

标签: javascript reactjs react-native

我是新的反应和js以及整个'国家'概念。无论如何,我正在尝试使用值lat,lng和boolean(打开或不打开)来遍历一系列汽车经销商。这就是代码现在的样子,我想知道MapView.Marker代码应该如何查找它。感谢

  <MapView style={styles.map}
    region ={{
    latitude:40.758927,
    longitude:-73.984981,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
 }}
 >
<MapView.Marker
  coordinate={{
    latitude:40.758927,
    longitude:-73.984981,
  }}
    title={'Ferrari dealer'}
    description={'Currently closed'}
    />

    </MapView>

1 个答案:

答案 0 :(得分:2)

这样的事情:

let markers = this.state.cardDealers.map(dealer => (
  <MapView.Marker
    key={dealer.id}
    coordinate={{
      latitude: dealer.lat,
      longitude: dealer.lng,
    }}
    title={dealer.title}
    description={dealer.open ? 'Open' : 'Currently closed'}
  />
));

return (
  <MapView style={styles.map}
      region ={{
      latitude:40.758927,
      longitude:-73.984981,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1,
   }}
  >
    {markers}
  </MapView>
)

您可能会发现React documentation on lists and keys有帮助。