开放地图/谷歌地图的反应本地

我试图打开我的 react-native应用程序谷歌地图或地图。

当我在我的 iPhone/模拟器上运行应用程序时，我收到这个错误

"Don't know how to open 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);
}
});
}
85477 次浏览
小开

这是因为 iOS 还不支持 geo:，就像在 这么回答中提到的那样。你能做的就是检测操作系统，然后:

  • 在 Android 上使用 geo:
  • 用不同的方式处理 iOS。可能使用 maps:，因为它将打开苹果地图，虽然我不确定如何正确地发送坐标到它。或者可以将它附加到谷歌地图 HTTP URL 并在浏览器中打开它。

对于 例子，你的 openGps函数可以是这样的:

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

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

你可以这样做:

安卓:

 <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

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

在 Android 上使用以下地址:

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

用你最喜欢的地址代替 address。

小开

为了补充其他答案，这里有一个在 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 和谷歌地图的细节，这里有一个文档链接: Https://developers.google.com/maps/documentation/urls/android-intents

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


Linking.openURL(url)
小开

根据 苹果地图连结中的文档,@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})`
});
小开

我认为 反应-本地-发射-导航器模块是这样做的一种更清洁的方式。然后，它很简单，如 < code > LaunchNavigator.导航([50.279306，-5.163158] ，{ start: “50.342847，-4.749904”}) . then (() = > console.log (“ Launted Navator”)) . catch ((err) = > console. Error (“ Error  發動導航器:”+ err)) ; .

小开

一种解决方案是使用 反应-本地-地图-链接 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
})
小开

我已经试过这个方法了，效果不错

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

OpenURL (网址) ;

小开

在 Oma 的帮助下，我想到了这个。对于 ios 版本，我直接编写了 googleMaps 而不是 map，因为它不能工作。这是因为谷歌地图是安装在设备上的，我用一个物理设备测试了这一点。如果它没有安装，它将进入商店。它在启动导航时也能很好地工作。

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

FYI-IM 使用来自 NativeBase 库的 Button 组件。

小开

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

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

注意 : 要在 监控室上打开谷歌地图，你必须在 info.plist中添加这个

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

我发现这是从你的应用程序导航到谷歌地图最简单的方法

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

我已经为 店铺位置创建了一个单独的组件，完整的代码如下所示。

组件代码:

import React from "react";
import { View, Pressable, Platform, Linking } from "react-native";
import styles from "./styles";
import Text from "../Text";


const StoreLocation = ({}) => {


/**
* method to open google map
*/
const openMap = () => {
const latitude = 33.189368147027565; // latitude of your desire location
const longitude = 73.35574341458842; // longitude of your desire location
const scheme = Platform.select({
ios: "maps:0,0?q=",  // if device is ios
android: "geo:0,0?q=", // if device is android
});
const latLng = `${latitude},${longitude}`;
const label = "your own label";
const url = Platform.select({
ios: `${scheme}${label}@${latLng}`,
android: `${scheme}${latLng}(${label})`,
});


Linking.openURL(url);
};


return (
<Pressable onPress={() => openMap()} style={styles.mapView}>
<View>
<Text>Open Map</Text>
</View>
</Pressable>
);
};


export default StoreLocation;

如果你只想使用方法只是复制 OpenMap ()方法和改变你想要的 经度，纬度和 标签使用这个方法根据你的应用程序。

在 Android 上进行测试


提交答案