如何在React Native中创建实时跟踪? [英] How to create live tracking in react native?

查看:61
本文介绍了如何在React Native中创建实时跟踪?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

任何人都可以告诉我,如何在react native中创建实时跟踪?使用地理位置,反应本机地图或其他依赖项,我想制作一个像uber这样的跟踪驱动程序

Can anyone tell me please , how to create live tracking in react native ? Using geolocation ,react native maps or other dependencies, i wanna make a tracking driver like uber

推荐答案

希望您已经安装了react-native-maps并将必要的软件包添加到您的应用程序中.在 componentDidMount()中使用下面给出的代码.每当更改您的位置时,都会调用下面给出的代码.它将为您提供更新的位置.在这里您还将找到航向,您可以使用航向来显示车辆方向或路线.

Hope you have installed react-native-maps and added the necessary packages to your application. Use the below given code in componentDidMount(). The below given code will be called whenever your location will be changed. and it will provide you the updated location. Here you will also find the heading, you can use heading to show the vehicle direction or alignment.

this.watchId = navigator.geolocation.watchPosition(
  (position) => {
    this.locationPermission = true;
    console.log('Watch Position response', position);
    const { coordinate } = this.state;
    const { latitude, longitude } = position.coords;
    const newCoordinate = {
      latitude,
      longitude
    };
    if (Platform.OS === 'android') {
      if (this.marker) { this.marker._component.animateMarkerToCoordinate(newCoordinate, 500); }
    }
    else {
      coordinate.timing(newCoordinate).start();
    }

    this.setState({
      marker: {
        latlng: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        }
      },
      heading: position.coords.heading,
    })


    );

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

这篇关于如何在React Native中创建实时跟踪?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆