Question

我正在阅读一个json文件来阅读不同城市提供的服务。我在主页面上显示servics，当用户点击服务时，我将它们重定向到提供服务的页面。我需要向他们展示这些服务的行车路线。以下是我的services.Json文件：

    [

{
    "id":1,
    "ser": "Test Service",
    "Location": "Orange County",
    "Phone":"(777)-922-5151",
    "SecondLoc": "Los Angeles",
    "email":"test@test.com",
    "sourceLat":"-33.8356372",
    "sourceLong":"18.6947617",
    "destLat":"-33.8600024",
    "destLong":"18.697459"
  }
]

以下是我在手机上的服务的屏幕截图：

当我点击测试服务时。我被重定向到另一个页面，该页面显示源和目的地的经度，纬度以及提供服务的城市。以下是截图：

以下是我的代码，用于向用户显示说明：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();

const styles = StyleSheet.create({
  card: {
    marginTop: 10,
    paddingBottom: 20,
    marginBottom: 20,
    borderColor: 'lightgrey',
    borderWidth: 0.5,
  },
  title1: {
      top: 10,
      left: 80,
      fontSize: 24,
  },
  title2: {
      top: 35,
      left: 82,
      fontSize: 18,
  },
  image: {
      flex: 0,
      height: 100,
      width: 333,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
  },
  closeIcon: {
      position: 'absolute',
      top: 5,
      left: 295,
      color: 'rgba(233,166,154,0.8)',
      backgroundColor: 'rgba(255,255,255,0)',
  },  
  icon: {
      position: 'absolute',
      top: 15,
      left: 0,
      color: 'white',
      backgroundColor: 'rgba(255,255,255,0)',
  },
  textArea: {
      flexDirection: 'row',
      paddingLeft: 20,
      paddingTop: 10,
      width: 260,
  },
  textIcons: {
      color: '#26a69a',
  },
  actionArea: {
      paddingTop: 10,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
  },

  title:{
    justifyContent: 'center',
    paddingTop: 10,
    alignSelf:'center',
    fontWeight: 'bold',
    fontSize: 19,
    },

    SerContent:{
        fontWeight: 'bold',
        fontSize: 15,
        paddingTop: 10,
        alignSelf:'center',
    },
    underLineText: {
        fontSize: 12,
        textDecorationLine: 'underline',
        color: 'red',
        fontWeight: 'bold',
        textAlign: 'center',
      }
});
class ServiceDetail extends Component {
    handleClick = (link) => {
        Linking.canOpenURL(link).then(suppported => {
            if (supported) {
                Linking.openURL(link);
            } else {
                console.log('Don\'t know how to open URI: ' + link);
            }
        });
    };

    handleGetDirections = () => {
        const data = {
           source: {
            latitude: -33.8356372,
            longitude: 18.6947617
          },
          destination: {
            latitude: -33.8600024,
            longitude: 18.697459
          },
          params: [
            {
              key: "travelmode",
              value: "driving"        // may be "walking", "bicycling" or "transit" as well
            },
            {
              key: "dir_action",
              value: "navigate"       // this instantly initializes navigation using the given travel mode 
            }
          ]
        }

        getDirections(data)
      }
  render() {
    return (
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={[theme.cardStyle, styles.card]}>

        <SimpleIcon name={'close'} size={30} style={styles.closeIcon}
            onPress={() => this.props.noneSelected()} />
        <Text  style={styles.title}>{this.props.services.ser}</Text>
        <Text style={styles.SerContent} >Service is available in the following locations:</Text>
        <Text style={styles.SerContent}> {this.props.services.Location} </Text>   
        <Text style={styles.SerContent}> {this.props.services.sourceLat} </Text> 
        <Text style={styles.SerContent}> {this.props.services.sourceLong} </Text> 
        <Text style={styles.SerContent}> {this.props.services.destLat} </Text> 
        <Text style={styles.SerContent}> {this.props.services.destLong} </Text> 
        <TouchableOpacity onPress={this.handleGetDirections}>
        <Text style={styles.underLineText}>directions</Text>
      </TouchableOpacity>
        <Text style={styles.SerContent}>{this.props.services.SecondLoc}</Text>




        </View>
      </ScrollView>
    );
  }
}


const mapStateToProps = state => {
    return { 
        services: state.serviceSelected
     };
  };


export default connect(mapStateToProps, actions)(ServiceDetail);

我不确定如何将这些经度和纬度数据放在该const数据变量中，这样我就不必像在代码中那样对经度和纬度进行硬编码。我可以使用现有代码查看行车路线，但经度和纬度是硬编码的。我是React Native的新手。现在，当我点击行车路线时，我会看到以下屏幕截图：

任何帮助都将受到高度赞赏。

Answer 1

我不确定我是否理解你的问题，如果我不理解，请发表评论。因此，如果您想要打开导航到特定目的地，您可以使用：

Android：

 <TouchableOpacity onPress={() => Linking.openURL('google.navigation:q=55+57')}>

其中q是目标lat + long

IOS：

  <TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=50+55&daddr=55+57')}>

其中saddr是起始地址，daddr是目标地址lat + long

要从JSON中使用它，您应该连接您的网址：

destUrl = 'google.navigation:q=' yourJson.lat + '+' + yourJson.long
<TouchableOpacity onPress={() => Linking.openURL(destUrl)}>

从Json读取纬度和经度并计算行车路线

1 个答案: