web-dev-qa-db-ja.com

反応ネイティブでマップ/グーグルマップを開く

Googleマップまたは反応ネイティブアプリケーションでマップを開こうとしていますが、iPhone /シミュレータでアプリを実行すると、「URIを開く方法がわかりません：...」というエラーが表示されます。私が間違っているのは何ですか？

私のコード：

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

カスタムラベルios/AndroidでURLを開くには：

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);
66
Narek Ghazaryan

これは、 this SO answer で述べられているように、iOSがgeo:をまだサポートしていないためです。OSを検出し、

  • androidでgeo:を使用します
  • iOSの扱いが異なります。おそらく、開くときにmaps:を使用してくださいApple Maps、座標を適切に送信する方法がわかりません。または、Googleマップのhttp URLに追加して開くブラウザで。

example の場合、openGps関数は次のようになります。

openGps = () => {
  var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:';
  var url = scheme + '37.484847,-122.148386';
  Linking.openURL(url);
}
10
Michael Cheng

あなたはこのようにすることができます：

アンドロイド：

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

ここで、qは宛先lat + longです

IOS：

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

saddrは開始アドレス、daddrは宛先アドレスlat + longです

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

または、デバイスにGoogleマップアプリがあるかどうかを確認し、そうでない場合はブラウザで場所を開きます

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);
  }
});
1
Ali Mohammad

以下を使用してアドレスを指定してAndroidに取り組んでいます：

Linking.openURL('https://www.google.com/maps/search/?api=1&query=address');

addressをお気に入りのアドレスに置き換えます。

0
Yossi