【问题标题】:React Native Maps反应原生地图
【发布时间】:2021-01-01 00:17:16
【问题描述】:

我正忙着开发一个基于位置的应用程序并使用 expo,有没有人知道如何在地图上跟踪用户位置并判断他们是否到达类似于 GPS 的 expo 项目的特定目的地。

      <MapViewDirections
      origin={userContext.userLocation}
      destination={userContext.userLocation}
      apikey={googleMapApi}
      mode='DRIVING'
      language='en's
      strokeWidth={8}
      strokeColor="#2A9D8F"
      optimizeWaypoints={true}
      resetOnChange={false}
      precision={"low"}
  
    />

【问题讨论】:

  • react-native-maps 没有这样做。您将需要一个像这样的地理定位包,例如 https://github.com/react-native-community/react-native-geolocation 并在您的坐标上放置一个标记

标签: reactjs react-native


【解决方案1】:

如果您使用 expo,您应该使用 expo-location api 中的 watchPositionAsync https://docs.expo.io/versions/latest/sdk/location/#locationwatchpositionasyncoptions-callback

您应该在此处跟踪更改,然后将坐标放入地图中。

用法


async componentWillMount() {

    const { status } = await Permissions.askAsync(Permissions.LOCATION);

    if (status === 'granted') {
      this._getLocationAsync();
    } else {
      this.setState({ error: 'Locations services needed' });
    }
  }

  componentWillUnmount() {
     this.location.remove(callback...);
  }

  _getLocationAsync = async () => {
      this.location = await Location.watchPositionAsync(
          {
              enableHighAccuracy: true,
              distanceInterval: 1,
              timeInterval: 10000
          },
          newLocation => {
              let coords = newLocation.coords;
          // this.props.getMyLocation sets my reducer state my_location
          this.props.getMyLocation({
              latitude: parseFloat(coords.latitude),
              longitude: parseFloat(coords.longitude)
          });
        },
        error => console.log(error)
      );
      return location;
  };

【讨论】:

  • 可以获取到用户位置,但是不知道如何和目的地比较,看是否到达。
  • 你应该使用 harvesine 公式并比较它们之间的距离,你应该做出一个可接受的范围,例如 5 公里应该是好的。 stackoverflow.com/questions/18883601/…
猜你喜欢
  • 1970-01-01
  • 2022-09-29
  • 2023-03-04
  • 2019-07-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-28
  • 1970-01-01
相关资源
最近更新 更多