web-dev-qa-db-fra.com

ouvrir des cartes/google maps en réactif natif

J'essaie d'ouvrir Google Maps ou des cartes dans mon application react-native, mais lorsque je lance l'application dans mon iPhone/simulateur, le message d'erreur "Je ne sais pas comment ouvrir URI: ..." . Je me trompe?

Mon code:

openGps() {
  var url = 'geo:37.484847,-122.148386'
  this.openExternalApp(url)
}

openExternalApp(url) {
  Linking.canOpenURL(url).then(supported => {
    if (supported) {
      Linking.openURL(url);
    } else {
      console.log('Don\'t know how to open URI: ' + url);
    }
  });
}
google-mapsreact-nativemaps
11
lolix

Pour ouvrir une URL avec une étiquette personnalisée ios/Android:

const scheme = Platform.select({ ios: 'maps:0,0?q=', Android: 'geo:0,0?q=' });
const latLng = `${lat},${lng}`;
const label = 'Custom Label';
const url = Platform.select({
  ios: `${scheme}${label}@${latLng}`,
  Android: `${scheme}${latLng}(${label})`
});


Linking.openURL(url);
37
Narek Ghazaryan

En effet, iOS ne prend pas encore en charge geo:, comme indiqué dans this SO, répondez . Ce que vous pouvez faire, c'est détecter le système d'exploitation et:

  • utiliser geo: sur Android
  • gérer iOS différemment. Utilisez éventuellement maps: car cela ouvrira Apple Maps, bien que je ne sache pas comment lui envoyer correctement les coordonnées. Ou peut-être l'ajouter à une URL http Google Maps et l'ouvrir dans le navigateur.

Pour exemple , votre fonction openGps pourrait ressembler à ceci:

openGps = () => {
  var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:'
  var url = scheme + '37.484847,-122.148386'
  this.openExternalApp(url)
}
7
Michael Cheng

vous pouvez faire comme ça:

Android: 

 <TouchableOpacity onPress={() => Linking.openURL('google.navigation:q=100+101')}>

où q est la destination lat + long

IOS:

  <TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=100+101&daddr=100+102')}>

où saddr est l'adresse de début et daddr est l'adresse de destination lat + long

4
oma
const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  Android: "geo:" + latitude + "," + longitude + "?q=" + label
});
Linking.openURL(url);

ou en vérifiant s'il y a une application Google Map sur l'appareil et si ce n'est pas ouvert l'emplacement dans le navigateur

const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  Android: "geo:" + latitude + "," + longitude + "?q=" + label
});

Linking.canOpenURL(url).then(supported => {
  if (supported) {
    return Linking.openURL(url);
  } else {
    browser_url =
      "https://www.google.de/maps/@" +
      latitude +
      "," +
      longitude +
      "?q=" +
      label;
    return Linking.openURL(browser_url);
  }
});
0
Ali Mohammad