React native中的打开地图/谷歌地图

Question

我正在尝试在我的react-native应用程序中打开google maps或maps，但是当我在Iphone / simulator中运行该应用程序时，出现错误“不知道如何打开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);
    }
  });
}

Answer 1

使用自定义标签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); 

Answer 2

这是因为geo:中提到的，iOS尚不支持this SO answer。您可以做的就是检测操作系统，然后：

• 在Android上使用geo:
• 以不同的方式处理iOS。可能使用maps:，因为它将打开Apple Maps，尽管我不确定如何正确将坐标发送给它。或者将其附加到Google Maps http URL并在浏览器中打开。

对于example，您的openGps函数可能看起来像这样：

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

Answer 3

您可以这样做：

Android：

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

其中q是目标纬度+长度

IOS：

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

其中saddr是起始地址，daddr是目标地址lat + long

Answer 4

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 map应用，以及是否未在浏览器中打开位置

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

Answer 5

使用以下地址在Android上工作：

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

用您喜欢的地址替换address。