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

我需要在 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>
    );

以下是我收到的错误:



[![在此处输入图像描述][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

最佳答案

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>

关于javascript - 如何在 React Native 中导入 geolib 来计算两点之间的距离？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55940237/