javascript - React Native の MapView にマーカーを設定するにはどうすればよいですか

Question

• React Native で MapView にマーカーを設定したいのですが、MapViewの公式ドキュメントに情報がありません。
• そのように許可されていない場合、React Native でreact-googlemapsなどの既存の反応モジュールを使用するにはどうすればよいですか?

Answer 1

ありがとう@naoufal。最後に、反応するネイティブ IOS のマップにマーカーを表示できます。

<View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0,
              longitudeDelta: 0.0,
          }}
        >
        <MapView.Marker
            coordinate={{latitude: 37.78825,
            longitude: -122.4324}}
            title={"title"}
            description={"description"}
         />
      </MapView>
 </View>

マップとコンテナーのスタイルには、次のスタイルを使用しました。

 var styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    map: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }
});

次のリンクを参照しました: React native IOS-マップ上のマーカーの表示

Answer 2

import MapView from 'react-native-maps';
<View style={StyleSheet.absoluteFillObject}>
        <MapView style={styles.map}
          showsUserLocation //to show user current location when given access
          loadingEnabled //to show loading while map loading
          style={styles.map}
          initialRegion={{
              latitude,
              longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
          }}
        >
        {

             locations && locations.map((location, index) => {
                   const {
                       coords: { latitude, longitude }
                          } = location;
                                return (
                                    <MapView.Marker
                                        key={index}
                                        coordinate={{ latitude, longitude }}
                                        title={"title"}
                                        description={"address"}
                                        // onPress={this.onMarkerPress(location)}
                                    />
                                )
                            })
                        }
      </MapView>
 </View>```

const スタイル = StyleSheet.create({

map: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
}

});

"dependencies": { "native-base": "^2.13.8", "react": "16.9.0", "react-native": "0.61.2", "react-native-maps": "git+ https://git@github.com/react-native-community/react-native-maps.git " },

Try using this. Hope it helps to mark for many locations. Happy Coding.