web-dev-qa-db-fra.com

Comment définir un marqueur dans MapView de React Native

  • Je veux placer un marqueur sur MapView dans React Native, mais je ne trouve aucune information dans les documents officiels de MapView .
  • Si ce n'est pas autorisé de cette façon, comment puis-je utiliser le module React existant tel que react-googlemaps in React Native?
javascriptgoogle-mapsreactjsreact-native
13
ivan wang

Vous pouvez définir des marqueurs en utilisant la propriété annotations prop.

Par exemple:

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

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

Merci @naoufal. Enfin, je suis capable d'afficher des marqueurs sur la carte pour réagir IOS natif.

<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>

Pour les styles de carte et de conteneur, j'ai utilisé les styles suivants:

 var styles = StyleSheet.create({

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

J'ai fait référence au lien suivant: React native IOS- Afficher les marqueurs sur la carte

28
BK19

Selon ce problème , il n'est pas encore exposé. Vous ne pourrez pas non plus utiliser le package web-React, React Native ne fonctionne pas comme ça.

Deux suggestions:

  1. Attendez que le problème ci-dessus soit résolu pour obtenir une API appropriée
  2. Essayez d'utiliser WebView pour créer un lien vers une carte Google avec une annotation

Cependant, je ne suis pas certain que le # 2 soit possible.

1
Colin Ramsay