web-dev-qa-db-ja.com

React NativeのMapViewでマーカーを設定する方法

  • React NativeでMapViewにマーカーを設定したいのですが、 MapView の公式ドキュメントから情報を見つけることができません。
  • そのように許可されていない場合、 react-googlemaps in React Native？
javascriptgoogle-mapsreactjsreact-native
13
ivan wang

annotations prop。 を使用してマーカーを設定できます。

例えば：

var markers = [
  {
    latitude: 45.65,
    longitude: -78.90,
    title: 'Foo Place',
    subtitle: '1234 Foo Drive'
  }
];

<MapView
  region={...}
  annotations={markers}
/>
24
naoufal

ありがとう@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- Display Markers on map

28
BK19

この問題 によると、まだ公開されていません。 web-Reactパッケージも使用できません。React Nativeはそのようには動作しません。

2つの提案：

  1. 適切なAPIを取得するには、上記の問題が解決されるまで待ちます
  2. WebViewを使用して、アノテーション付きのGoogleマップにリンクしてみてください

しかし、実際に＃2が可能かどうかはわかりません。

1
Colin Ramsay