在本机反应中打开地图/谷歌地图答案

【问题标题】：open maps/google maps in react native在本机反应中打开地图/谷歌地图
【发布时间】：2017-08-30 01:22:04
【问题描述】：

我试图在我的 react-native 应用程序中打开谷歌地图或地图，但是当我在我的 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-maps react-native maps

【解决方案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);

【讨论】：

这个解决方案太干净了！感谢您提供label 组件！
像这样改变 const scheme = Platform.OS === 'ios' ? 'maps:0,0?q=' : 'geo:0,0?q=';
在谷歌地图上，标记的名称是坐标而不是标签：/
android可以添加自定义标签吗？
有一个不错的库可以完成所有这些以及更多工作：github.com/tschoffelen/react-native-map-link。

【解决方案2】：

这是因为 iOS 尚不支持 geo:，正如 this SO answer 中所述。您可以做的是检测操作系统并：

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

对于example，您的openGps 函数可能如下所示：

openGps = (lat, lng) => {
  var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:';
  var url = scheme + `${lat},${lng}`;
  Linking.openURL(url);
}

【讨论】：

您也可以使用http://maps.apple.com/?ll=<lat>,<long> 或http://maps.apple.com/?daddr=<lat>,<long> 开始导航。

【解决方案3】：

你可以这样做：

安卓：

 <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

【讨论】：

参考：developers.google.com/maps/documentation/urls/…
感谢 DEV 的解决方案！

【解决方案4】：

const url = Platform.select({
  ios: `maps:0,0?q=${fullAddress}`,
  android: `geo:0,0?q=${fullAddress}`,
})

Linking.openURL(url)

【讨论】：

您好，欢迎来到 stackoverflow，感谢您的回答。虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。
我会原谅@pragnesh - 这是一个干净，不言自明且实际工作的代码。

【解决方案5】：

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

或检查设备上是否有谷歌地图应用程序，如果没有在浏览器中打开位置

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 {
    const browser_url =
      "https://www.google.de/maps/@" +
      latitude +
      "," +
      longitude +
      "?q=" +
      label;
    return Linking.openURL(browser_url);
  }
});

【讨论】：

有了这个答案，地图会随着自定义标签一起打开，这是一件好事。但是这种方法的一个主要问题是，如果我在不同城市有多个具有相同街区名称的地址，那么无论我提供哪个纬度，它总是将我带到具有给定街区名称的第一个城市。如果有解决方案，那么这将是一个很好的解决方案。

【解决方案6】：

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

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

用您喜欢的地址替换address。

【讨论】：

【解决方案7】：

为了补充其他答案，这是在 Android 上添加标记的 sn-p：

    const location = `${latitude},${longitude}`
    const url = Platform.select({
      ios: `maps:${location}`,
      android: `geo:${location}?center=${location}&q=${location}&z=16`,
    });
    Linking.openURL(url);

如果您想了解有关 Android 和 google 地图的更多详细信息，请访问以下文档链接： https://developers.google.com/maps/documentation/urls/android-intents

【讨论】：

感谢节省了我的时间 :)

【解决方案8】：

从Apple Map Links 的文档中，@Narek Ghazaryan 的回答略有变化。这是因为苹果地图会首先查询提供的“标签”。如果标签或商店名称不存在，则不会显示任何内容。

所以我们需要添加一个参数为“ll”以使用提供的标签/商店名称指定当前位置。

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}&ll=${latLng}`,
  android: `${scheme}${latLng}(${label})`
});

【讨论】：

【解决方案9】：

一种解决方案是使用react-native-map-link lib。它会打开一个带有所需选项的底页

import { showLocation } from 'react-native-map-link'

showLocation({
    latitude: 38.8976763,
    longitude: -77.0387185,
    sourceLatitude: -8.0870631,  // optionally specify starting location for directions
    sourceLongitude: -34.8941619,  // not optional if sourceLatitude is specified
    title: 'The White House',  // optional
    googleForceLatLon: false,  // optionally force GoogleMaps to use the latlon for the query instead of the title
    googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58',  // optionally specify the google-place-id
    alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
    dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
    dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
    cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
    appsWhiteList: ['google-maps'] // optionally you can set which apps to show (default: will show all supported apps installed on device)
    // appTitles: { 'google-maps': 'My custom Google Maps title' } // optionally you can override default app titles
    // app: 'uber'  // optionally specify specific app to use
})

【讨论】：

【解决方案10】：

我已经尝试过这个解决方案，它正在工作

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

【讨论】：

这个已经给出的答案（stackoverflow.com/a/48006762/1574221）有什么不同？
我无权投票，因为我是新手，所以我这样做是为了让他们知道它正在工作

【解决方案11】：

对于谷歌地图/地图方向，您可以使用此代码

const latitude = "30.3753";
const longitude = "69.3451";
const openMapDirection = () => {
    const url: any = Platform.select({
      ios: `comgooglemaps://?center=${latitude},${longitude}&q=${latitude},${longitude}&zoom=14&views=traffic"`,
      android: `geo://?q=${latitude},${longitude}`,
    });
    Linking.canOpenURL(url)
      .then((supported) => {
        if (supported) {
          return Linking.openURL(url);
        } else {
          const browser_url = `https://www.google.de/maps/@${latitude},${longitude}`;
          return Linking.openURL(browser_url);
        }
      })
      .catch(() => {
        if (Platform.OS === 'ios') {
          Linking.openURL(
            `maps://?q=${latitude},${longitude}`,
          );
        }
      });
  };

注意：要在 IOS 上打开 google 地图，您必须将其添加到 info.plist

<key>LSApplicationQueriesSchemes</key>
  <array>
   <string>comgooglemaps</string>
  </array>

【讨论】：

【解决方案12】：

我认为react-native-launch-navigator 模块是一种更简洁的方法。那么就很简单了LaunchNavigator.navigate([50.279306, -5.163158], {start: "50.342847, -4.749904"}) .then(() => console.log("Launched navigator")) .catch((err) =>console.error("Error launching navigator: "+err));。

【讨论】：

【解决方案13】：

在oma的回答的帮助下，我想出了这个。对于ios版本，我直接写了googleMaps而不是maps，因为它不起作用。假设设备上安装了 Google 地图，并且我使用物理设备对此进行了测试。如果未安装，它将进入商店。它在启动导航时也能完美运行。

<Button
  hasText
  transparent
  onPress={() =>
    Linking.openURL(
      Platform.OS === 'ios'
        ? 'googleMaps://app?saddr=6.931970+79.857750&daddr=6.909877+79.848521'
        : 'google.navigation:q=6.909877+79.848521',
    )
 }>
    <Text>Open Maps</Text>
 </Button>

仅供参考 - 我使用的是 Native Base 库中的 Button 组件。

【讨论】：

如何向 ios url 添加更多位置？有“航点”重定向到浏览器，但它不适用于重定向到应用程序

【解决方案14】：

我发现这是从您的应用导航到 Google 地图的最简单方法

const url = `https://www.google.com/maps/dir/?api=1&destination=lat,long&dir_action=navigate`
Linking.openURL(url);

【讨论】：