React Native开启本地地图

Question

我希望我的按钮onPress函数调用一个函数，该函数将根据设备打开苹果地图或谷歌地图。但奇怪的是，当我按下按钮时没有任何反应。

以下是我的函数：

openMap= () => {
  console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

这里是按钮：

<TouchableOpacity 
          onPress={this.openMap}
          style={styles.navigateBtn}>
            <Icon name="md-navigate" style={{ fontSize: 24 }} />
            <Text
              style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
            >
              NAVIGATE
                </Text>
          </TouchableOpacity>

最终我希望能将经度和纬度传入 openMap 函数以获取方向，但首先我需要让地图打开。
这是我的导入：

import { View, TouchableOpacity, Modal, Platform, Alert, StyleSheet, Linking } from "react-native";
import {Header, Content, Text, Button, Icon, Card,CardItem, Title, Left, Right, Body, Container
} from "native-base";
import { Constants } from 'expo

- Emil Juboori

Answer 1

这将在网页中打开地图，然后重定向到应用程序（如果安装了应用程序）：

const openMaps = (latitude, longitude) => {
  const daddr = `${latitude},${longitude}`;
  const company = Platform.OS === "ios" ? "apple" : "google";
  Linking.openURL(`http://maps.${company}.com/maps?daddr=${daddr}`);
}

尽管我只会使用这个库，它使用深度链接代替：

react-native-open-maps

- Nickmccomb

Answer 2

您的按钮似乎在TouchableOpacity的onPress中调用了this.Map。它不应该是this.openMap吗？希望这可以帮到您！编辑：尝试像这样在组件内声明您的函数：

openMap() {
    console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

对于您的TouchableOpacity，请尝试使用以下代码：

<TouchableOpacity 
      onPress={() => this.openMap() }
      style={styles.navigateBtn}>
        <Icon name="md-navigate" style={{ fontSize: 24 }} />
        <Text
          style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
        >

- Charles-olivier Demers

---

@charles-oliver Demers 那是个笔误，糟糕！发现得好。在我的代码中应该是 "onPress={this.openMap}"，但还是不起作用 :( - Emil Juboori

你的 openMap 被调用了吗？你看到了 console.log 吗？ - Charles-olivier Demers

尝试我的新回答。 - Charles-olivier Demers

@Charles-oliver 我看不到我的 console.log，现在出现了一个错误 "_this2.openMap 不是一个函数"。 - Emil Juboori

@charles-oliver 我解决了。我使用的指定操作系统的语法是错误的。我将其更改为：openMap() { console.log('打开方向') if (Platform.OS === "ios") { Linking.openURL('http://maps.apple.com/maps?daddr=') } else { Linking.openURL('http://maps.google.com/maps?daddr='); } }; 现在看起来可以工作了！ - Emil Juboori

Answer 3

    openMap= () => {
    console.log('open directions')
   let f = Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=38.7875851,-9.3906089');
        },
        android: () => {
            console.log('ANDROID')
            Linking.openURL('http://maps.google.com/maps?daddr=38.7875851,-9.3906089').catch(err => console.error('An error occurred', err));;
        }
    });

    f();
}

- Tiago Monteiro