反应原生的开放地图/谷歌地图

时间：2017-04-04 17:38:46

标签： google-maps react-native maps

我正在尝试在我的本机应用程序中打开谷歌地图或地图，但是当我在我的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);
    }
  });
}

13 个答案:

答案 0 :(得分：54)

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

答案 1 :(得分：8)

这是因为iOS geo:尚未支持geo:。您可以做的是检测操作系统和：

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

对于this SO answer，您的openGps = () => { var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:' var url = scheme + '37.484847,-122.148386' this.openExternalApp(url) } 功能可能如下所示：

Private Sub UserForm_Initialize()

Dim i, rowrow As Integer
Dim Cell As Range
Dim Unique As New Collection
Dim Item As Range

LastNonEmptyRow = ThisWorkbook.Worksheets("myfile").Range("A1").End(xlDown).Row

On Error Resume Next
For Each Cell In ThisWorkbook.Worksheets("myfile").Range("A2:A" & rowrow)
    Unique.Add Cell, CStr(Cell)
Next Cell
On Error GoTo 0

For Each Item In Unique
   ListBox1.AddItem Item
Next Item

End Sub

答案 2 :(得分：7)

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

Linking.openURL(url)

答案 3 :(得分：5)

你可以这样做：

Android：

 <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

答案 4 :(得分：2)

一种解决方案是使用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
})

答案 5 :(得分：2)

我已经尝试过此解决方案，并且可以正常工作

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

答案 6 :(得分：1)

为补充其他答案，以下是在Android上添加标记的代码段：

    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

答案 7 :(得分：0)

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

答案 8 :(得分：0)

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

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

用您喜欢的地址替换address。

答案 9 :(得分：0)

根据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})`
});

答案 10 :(得分：0)

我认为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));。

答案 11 :(得分：0)

借助oma的答案，我想到了这个。对于ios版本，我直接编写了googleMaps而不是地图，因为它不起作用。这是因为Google Maps已安装在设备上，并且我已使用物理设备对此进行了测试。如果未安装，它将进入商店。它也可以在开始导航时完美运行。

<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组件。

答案 12 :(得分：0)

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

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 上打开谷歌地图，您必须将其添加到 info.plist

<key>LSApplicationQueriesSchemes</key>
  <array>
   <string>comgooglemaps</string>
  </array>
相关问题
最新问题