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

Posted 2023-02-16

【中文标题】在本机反应中打开地图/谷歌地图

【英文标题】：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);
    
  );

【问题讨论】：

有没有类似的打开相机应用的方法？

【参考方案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)

【讨论】：

您好，欢迎来到 ***，感谢您的回答。虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。

我会原谅@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);

【讨论】：

这个已经给出的答案（***.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);