Question

我需要在react native中计算经度和纬度之间的距离。我有当前位置的经度和纬度，也有目的地的经度和纬度。他们有什么简单的方法可以计算距离吗？

我尝试使用geolib，但始终出现错误。以下是我的工作：

npm i geolib

我也将geolib放在了导入语句中。

  import {
    AppRegistry,
    StyleSheet,
    FlatList,
    Text,
    View,
    Alert,
    TouchableOpacity,
    Linking,
    Image,
    ScrollView,
    RefreshControl,
    Location,
    geolib
  } from 'react-native';

 _renderItem = ({item, index}) => {

    var dist  = geolib.getDistance(
      this.state.latitude,
      this.state.longitude,
      item.LatL,
      item.Long2
    );

    return (
      <View>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        <Text>Latitude from file:{item.LatL}</Text>
        <Text>Longitude from file :{item.Long2} </Text>
        <Text style={styles.AddressSpace} >Miles:{dist }</Text>
      </View>
    );

以下是我得到的错误：

TypeError：undefined不是对象
（评估“ _reactNative.geolib.getDistance”）

[！[在此处输入图片描述] [1]] [1]

我输入以下代码后就收到此错误：

   const dist = geolib.getDistance(
      { latitude, longitude },{ latitude: item.LatL, longitude: item.Long2 }
    );

不确定，但是仍然出现上述错误：以下是我的完整代码：

 import React, { Component } from 'react';
import { View, Text, item } from 'react-native';
import geolib from 'geolib';
class ServiceListDetails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
  }

  render() {
    const { latitude, longitude } = this.state;

    const dist = geolib.getDistance(
  { latitude, longitude },
  { latitude: 33.935558, longitude: -117.284912 }
);
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        <Text>Miles:{dist} </Text>
        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
      </View>
    );
  }
}

export default ServiceListDetails;

_  [1]: https://i.stack.imgur.com/8VadZ.png

Answer 1

geolib在react-native中不作为命名导出存在。

import {
  AppRegistry,
  StyleSheet,
  FlatList,
  Text,
  View,
  Alert,
  TouchableOpacity,
  Linking,
  Image,
  ScrollView,
  RefreshControl,
  Location
  // Remove `geolib` from here.
} from 'react-native';

// Import the lib from the one you've just installed.
import geolib from 'geolib';

了解import和export在ES6中的工作方式将有助于使用所需的所有库并在独立的模块文件中构造自己的代码。

然后，要使用Geolib获取两点之间的距离，需要使用getDistance function，它以2个对象作为参数。

// Function signature from the documentation:
geolib.getDistance(object start, object end[, int accuracy, int precision])

在您的情况下：

// Using destructuring here just to avoid repetition.
const { latitude, longitude } = this.state;

const dist = geolib.getDistance(
  { latitude, longitude },
  { latitude: item.LatL, longitude: item.Long2 }
);

还请注意：

返回值始终为浮点，表示以米为单位的距离。

要将其转换为英里，可以将结果乘以0.000621。

<Text style={styles.AddressSpace}>Miles: {dist * 0.000621}</Text>

理想情况下，我会将0.000621 magic number放在一个明确定义的常量中。

或者只需使用geolib.convertUnit function。

<Text style={styles.AddressSpace}>Miles: {geolib.convertUnit('mi', dist)}</Text>

Answer 2

尝试：

import { getDistance } from "geolib"

然后使用：

const dist = getDistance(...)

computeDestinationPoint（...）也有类似的问题

如何在React Native中导入geolib以计算两点之间的距离？

2 个答案: