Question

我的地理位置（lat + lon）有工作小吃。我正在尝试添加getDistance和isPointInCircle函数，它们都可以工作，直到我想用myLAT + myLON代替一个点。

在我的大力帮助下，我们建议您声明“ const {纬度，经度} = this.state;”。但我遗漏了一些东西，因为我仍然会出错。我尝试将函数放在“ componentDidMount（）”的内部和外部，但无法使其正常工作。

import geolib from "geolib";

export default class App extends Component {

 constructor(props) {
 super(props);
 this.state = {
  latitude: null,
  longitude: null,
  speed: null,
  error: null,
};
  }    

  componentDidMount() {
  this.watchId = navigator.geolocation.watchPosition(
  (position) => {
   const { latitude, longitude } = this.state;        
      this.setState({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      speed: position.coords.speed,
      error: null,
    });

  },
  (error) => this.setState({ error: error.message }),
  { enableHighAccuracy: true, timeout: 20000, maximumAge: 0, distanceFilter: 1},
);
}

  componentWillUnmount() {
  navigator.geolocation.clearWatch(this.watchId);
  }

  render() {
  return (  
     <View style={styles.container}>  
    <View style={{ flexGrow: 0.3, alignItems: 'center', justifyContent: 'center' }}>          
     <Text>GeoLib:: Distance: {DIST} meters</Text> //I'd like to put the DISTANCE here 
     {this.state.error ? <Text>Error: {this.state.error}</Text> : null}           
     </View>                  
);
  }
}

  let RADIUS = geolib.isPointInCircle(                 
       { latitude: latitude, longitude: longitude },
       {latitude: 37.600530, longitude: -122.482629},
        1000
    );

   let DIST = geolib.getDistance(
       { latitude: latitude, longitude: longitude },
       {latitude: 37.600530, longitude: -122.482629}
       );

   if(RADIUS == true){
       console.log("I am in Radius.");
   }else{
       console.log("I am NOT in Radius.");
    }

Answer 1

要访问处于状态的值，您需要使用this.state.key。您试图从状态访问值而没有正确的符号。您还只是在组件外部添加了依赖于组件内部值的值，这是行不通的。

这是我实现组件的方式，这只是重构组件的许多不同方式之一。

// other import statements eg React etc. 
import geolib from 'geolib';

export default class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      speed: null,
      distance: null,
      radius: null,
      error: null
    };
  }

  componentDidMount () {
    this.watchId = navigator.geolocation.watchPosition(
      (position) => {
        const { latitude, longitude, speed } = position.coords;
        const center = { latitude: 37.600530, longitude: -122.482629 };
        const { radius, distance } = this.calculateMeasurements(latitude, longitude, center);

        this.setState({
          latitude: latitude,
          longitude: longitude,
          speed: speed,
          radius: radius,
          distance: distance,
          error: null
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 0, distanceFilter: 1 }
    );
  }

  componentWillUnmount () {
    navigator.geolocation.clearWatch(this.watchId);
  }

  /*
   * latitude: user's latitude
   * longitude: user's longitude
   * center: center of the circle eg: { latitude: 37.600530, longitude: -122.482629 }
   * this function is now reusable you don't have to hard code the center coordinates
   */
  calculateMeasurements = (latitude, longitude, center) => {
    const radius = geolib.isPointInCircle(
      { latitude: latitude, longitude: longitude },
      { latitude: center.latitude, longitude: center.longitude },
      1000
    );
    const distance = geolib.getDistance(
      { latitude: latitude, longitude: longitude },
      { latitude: center.latitude, longitude: center.longitude }
    );
    console.log(radius, distance);
    return { radius, distance };
  }

  render () {
    const { radius, distance } = this.state;

    if (radius === true) {
      console.log('I am in Radius.');
    } else if (radius === null) {
      console.log('Radius has not been calculated');
    } else if (radius === false) {
      console.log('I am NOT in Radius.');
    }

    return (
      <View style={styles.container}>
        <View style={{ flexGrow: 0.3, alignItems: 'center', justifyContent: 'center' }}>
          <Text>GeoLib:: Distance: {distance !== null ? distance : 'unknown'} meters</Text>
          {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
        </View>
      </View>
    );
  }
}

将半径和距离的初始值添加到状态
删除在componentDidMount中获取的纬度和经度值，它们为null，并且您在任何地方都不会使用这些值。
从position.coords解构纬度，经度和速度。这样可以节省您每次想使用其中的值时都必须键入position.coords.key的时间。
创建一个辅助函数calculateMeasurements，该函数将计算所需的radius和distance值。使用刚刚找到的坐标在componentDidMount中进行调用。然后将radius和distance保存到componentDidMount
更新render，使其使用状态中的值。
修复</View>中丢失的render标签
从底部删除let RADIUS = ...和其他计算，因为它们在此位置无效。

将LAT + LON作为变量进行管理以获取距离

1 个答案: