web-dev-qa-db-ja.com

反応ネイティブマップで複数のマーカーをレンダリングする

Hye、React Nativeの新機能で、マップに複数のマーカーをレンダリングする方法を教えてください。

これは私のコードです

クラス内：-

constructor(props) {
super(props);

  this.state = {
   coordinate: ([{
     latitude: 3.148561,
     longitude: 101.652778,
     title: 'hello'
   },
   {
     latitude: 3.149771,
     longitude: 101.655449,
     title: 'hello'
   }
  ]),
 };

}

内部レンダリング：-

<MapView
        style={styles.map}
        showsUserLocation={true}
        followUserLocation={true}
        zoomEnabled={true}
        //annotations={markers}
      >  
            <MapView.Marker
              coordinate={this.state.coordinate}
              title={this.state.coordinate.title}
            />
      </MapView>

この2つのマーカーをマップ内にレンダリングしたいのですが、これをレンダリングするためにネイティブに反応するループを作成する方法がわかりません。私はすでにドキュメントで何をしようとしていますが、まだ動作していません。

前もって感謝します ：）

javascriptreact-nativegoogle-maps-markersreact-native-androidreact-native-ios
12
Hazim Ali

coordinateプロパティが正しく構築されていません。このようなことをしてください-

this.state = {
  markers: [{
    title: 'hello',
    coordinates: {
      latitude: 3.148561,
      longitude: 101.652778
    },
  },
  {
    title: 'hello',
    coordinates: {
      latitude: 3.149771,
      longitude: 101.655449
    },  
  }]
}

内部レンダリング

<MapView 
  ....
>
  {this.state.markers.map(marker => (
    <MapView.Marker 
      coordinate={marker.coordinates}
      title={marker.title}
    />
  ))}
</MapView>
33
vinayr