如何在 React Native 中導入 geolib 來計算兩點之間的距離？

Question

我需要計算本地反應中經度和緯度之間的距離。 我有我當前位置的經度和緯度，我有我目的地的經度和緯度。 他們有什么簡單的方法來計算距離嗎？

我嘗試使用 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函數，該函數以 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幻數放在某個明確定義的常量中。

或者只使用geolib.convertUnit函數。

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

Answer 2

嘗試：

import { getDistance } from "geolib"

然后使用：

const dist = getDistance(...)

我對 computeDestinationPoint(...) 有類似的問題