在 React Native 中链接地图

Posted 2023-03-15

【中文标题】在 React Native 中链接地图

【英文标题】：Linking Map in React Native

【发布时间】：2016-03-13 06:10:23

【问题描述】：

我在 ios 上使用 RN 0.20。我想创建一个链接，如果您单击该链接，它会将您重定向到手机中可用的地图应用程序及其坐标。这就是我使用 Linking 组件所做的。

redirectToMap() 
    Linking.canOpenURL('geo:37.484847,-122.148386').then(supported => 
        if (supported) 
            Linking.openURL('geo:37.484847,-122.148386');
         else 
            console.log('Don\'t know how to go');
        
    ).catch(err => console.error('An error occurred', err));

但它一直让我“不知道该怎么走”。但是，我从https://facebook.github.io/react-native/docs/linking.html 中的文档中看到，使用geo: 链接到地图是可行的。

【参考方案1】：

使用正确的 URL 方案

看看iOS的official documentation。 要打开地图，请使用建议的方案：

http://maps.apple.com/?ll=<lat>,<long>

【讨论】：

非常感谢您的帮助:)

好的，但是为什么链接geo URL 不起作用？正如@KelvinAliyanto 提到的，它清楚地写在 React Native 文档中。我预计，当我使用geo URL 时会弹出一个菜单（如果有超过 1 个地图应用程序），如下所示：kevinandamanda.com/whatsnew/wp-content/uploads/2014/01/…

点击iOS官方文档链接。它说：“与某些方案不同，地图 URL 不以“地图”方案标识符开头。相反，地图链接被指定为常规 http 链接，并在 Safari 或目标平台上的地图应用程序中打开。”

如果要开始导航，请使用http://maps.apple.com/?daddr=<lat>,<long>。

【参考方案2】：

你可以使用 react-native-open-maps 包

安装存储库 $ npm install --save react-native-open-maps

将导入添加到文件顶部 import openMap from 'react-native-open-maps'

放在一起

import React,  Component  from 'react'
import  Button  from 'react-native'
import openMap from 'react-native-open-maps'

export default class App extends Component 
  _goToYosemite() 
    openMap( latitude: 37.865101, longitude: -119.538330 );
  

render() 
    return (
      <Button
        color='#bdc3c7'
        onPress=this._goToYosemite
        title="Click To Open Maps ?" />
    );