Как постоянно обновлять позицию в MapView, используя watchPosition - PullRequest
Новая
       21

Как постоянно обновлять позицию в MapView, используя watchPosition

0 голосов
/ 04 июля 2019

Я создаю базовое приложение GPS с использованием React Native и не могу заставить его постоянно обновлять маркер местоположения, я думал, что функция navigator.geolocation.watchPostion () должна была делать это? (не против таблицы стилей, которой нет в коде, она есть) насколько я могу судить, watchPostion вызывается только один раз. 

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, MapView} from 'expo';

const LAT_DELTA = 0.00422;
const LONG_DELTA = 0.004021;
watchID = null

export default class App extends Component {
      state = {
        Position: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: LAT_DELTA,
        longitudeDelta: LONG_DELTA
      },
    markerPos:{latitude: 26.274540, longitude:49.95531}
  }

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition( pos =>{
    var lat = pos.coords.latitude;
    var long = pos.coords.longitude;

    var newState = {
      latitude: lat,
      longitude: long,
      latitudeDelta: LAT_DELTA,
      longitudeDelta: LONG_DELTA
    }
    this.setState({Position: newState}) 
    this.setState({markerPos: newState}) 

    },  error => console.log(error),
    {
      enableHighAccuracy: true,
      timeout: 20000,
      maximumAge: 1000,
      distanceFilter: 10
    })

  }

  componentWillUnmount = () => {
    navigator.geolocation.clearWatch(this.watchID)
  }


  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ alignSelf: 'stretch', height: 500 }}
          region={this.state.Position}
          mapType ={'satellite'}
        >
           <MapView.Marker
              coordinate={this.state.Position}
              title="My Marker"
               description="Some description"
            />
        </MapView>

        <Text>
          Location: {JSON.stringify(this.state.Position)}
        </Text>
      </View>
    );
  }
}
...