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

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 is not an object
(evaluating '_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]: /image/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 }
);

另请注意:

Return value is always float and represents the distance in meters.

要将其转换为英里，您可以将结果乘以 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>