时间戳

首页 > 解决方案 > 从用户当前位置计算里程

reactjs - 从用户当前位置计算里程

问题描述

在我的 JSON 文件中，我有目的地的纬度和经度。无论如何，我可以计算距用户当前位置的距离（以英里为单位）。到目前为止，我有以下代码。我可以使用以下代码查看地图，但我看不到用户当前位置的英里数和用户当前位置的地图。我不知道用户当前位置的经度和纬度。我只知道目的地的经度和纬度。下面的代码只显示了该位置的经度和纬度所在的位置。

 * 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,
  },

  container: {     
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4F6D7A', 
    height: 500,
    alignSelf:'center',
    width:500,
    position: 'relative',
    marginTop: 5,
    top: 10
  }, 

  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: 'black'

  },  
  icon: {
      position: 'absolute',
      top: 15,
      left: 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,
    alignItems: 'center',
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 22,
    color: 'black'
    },

    SerContent:{
        fontWeight: 'bold',
        fontSize: 16,
        paddingTop: 10,
        alignSelf: 'center',
        color: 'black'
    },

    underLineText: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color: 'black',
        fontWeight: 'bold',
        textAlign: 'center',

      },

      dir:{
        flexDirection:'row',
        paddingTop: 30,
        textAlign: 'center',
        fontSize: 17,
        alignSelf: 'center'

    } ,   

    Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 17,
        fontWeight: 'bold',
        color: 'black'
    },
    toolbar:{
        flexDirection:'row' ,   //Step 1

    },
    toolbarTitle:{
        width: 10,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        flex:1                //Step 3
      },
      buttonShape:{

        margin: 40,
        width:160,
        marginLeft: 80,
        backgroundColor:'#00BCD4',


    },

});
class ServiceDetail extends Component {




  render() {




var destUrl = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr1 + '+' + 'field'

return (



     <View>

         <View>

             <Text  style={styles.title}>{this.props.services.ser}</Text>
            <Text style={styles.SerContent} >Service is available in the following locations:</Text>
        </View>

         <View style={styles.dir}>
                <Text style={styles.Address1}> {this.props.services.Location}:</Text>   
                <TouchableOpacity  onPress={() => Linking.openURL(destUrl)}>
                    <Text style={styles.underLineText}>Directions</Text>
                </TouchableOpacity>
        </View>


   </View>



  );
}
}



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



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

下面是我的 JSON 文件

[
{
    "id":1,
    "ser": "Service1",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"test1@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.3732541",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },

  {
    "id":1,
    "ser": "Service2",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"test2@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },
  ]

任何帮助将不胜感激。

标签： reactjsreact-nativereact-native-android

解决方案

如果您不知道用户的当前位置，就无法计算到给定目标位置的距离。您写道，谷歌地图知道您当前的位置，但实际上并未将您的位置放入其中。那是因为谷歌地图会检查你手机的 GPS。

你也可以这样做！React Native 带有一个 Geolocation API，它可以帮助您检索用户的当前位置。对于 Android，您需要更新您的AndroidManifest.xml以获得用户访问 GPS 数据的权限。对于 iOS，它默认启用，但如果您想在应用程序在后台运行时获得访问权限；您需要更新Info.plist.

有关获取权限和使用 Geolocation API 的更多信息，请查看React Native 文档。

推荐阅读