response-native-maps: Как периодически обновлять местоположение пользователя, полученное с удаленного сервера - PullRequest
Новая
       20

response-native-maps: Как периодически обновлять местоположение пользователя, полученное с удаленного сервера

0 голосов
/ 06 сентября 2018

Я очень новичок, чтобы реагировать на родной язык и каким-то образом мне удалось отобразить карту и некоторые маркеры на ней. Но мне нужно прочитать набор местоположений (координат) с удаленного сервера и отобразить на карте. Другими словами, создатели должны изменить свое местоположение.

Я пробовал несколько разных способов, но ни один из них не помог. Если у кого-то есть предыдущий опыт, пожалуйста, помогите.

Ниже приведен мой существующий код. 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Container, Header, Content, Footer, FooterTab, Title, Button, Icon} from 'native-base';

export default class App extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {
            latitude: 6.9212768,
            longitude: 79.9610316,
            error: null,
            friends: [],
        };
    }

    componentDidMount() {
        navigator.geolocation.watchPosition(
            (position) => {
                console.log("wokeeey");
                console.log(position);
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    error: null,
                });
                //TODO: send user location to server
            },
            (error) => this.setState({error: error.message}),
            {enableHighAccuracy: false, timeout: 200000, maximumAge: 1000},
        );

        //API call to get friends
        this.setState({
            friends: [
                {
                    latitude: 6.9243768,
                    longitude: 79.9612316,
                    key: "friend 1"
                },
                {
                    latitude: 6.9213768,
                    longitude: 79.9641316,
                    key: "friend 2"
                }
            ],
        });
    }

    render() {
        contents = this.state.friends.map((item) => {
            return (
                <MapView.Marker
                    key={item.key}
                    coordinate={{"latitude": item.latitude, "longitude": item.longitude}}
                    title={item.key}/>
            );
        });
        return (
            <Container>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.container}
                    showsUserLocation={true}
                    showsMyLocationButton={true}
                    zoomEnabled={true}
                    followsUserLocation={true}
                    initialRegion={{
                        latitude: this.state.latitude,
                        longitude: this.state.longitude,
                        latitudeDelta: 0.0158,
                        longitudeDelta: 0.0070
                    }}
                >
                    {!!this.state.latitude && !!this.state.longitude && <MapView.Marker
                        coordinate={{"latitude": this.state.latitude, "longitude": this.state.longitude}}
                        title={"You're here"} pinColor={'#3498db'}
                    />}
                    <View>{contents}</View>
                </MapView>
            </Container>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Вы можете использовать следующий код для периодического обновления местоположения пользователя, получаемого от удаленного сервера: 

componentDidMount() {
   setTimeout(function () {

     // add your code for get and update makers every second 

   }, 1000);
}
0 голосов
/ 06 сентября 2018 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Container, Header, Content, Footer, FooterTab, Title, Button, Icon} from 'native-base';

export default class App extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {
            latitude: 6.9212768,
            longitude: 79.9610316,
            error: null,
            friends: [],
            contents: null
        };
    }

    componentDidMount() {
        navigator.geolocation.watchPosition(
            (position) => {
                console.log("wokeeey");
                console.log(position);
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    error: null,
                });
                //TODO: send user location to server
            },
            (error) => this.setState({error: error.message}),
            {enableHighAccuracy: false, timeout: 200000, maximumAge: 1000},
        );

        //API call to get friends
        this.setState({
            friends: [
                {
                    latitude: 6.9243768,
                    longitude: 79.9612316,
                    key: "friend 1"
                },
                {
                    latitude: 6.9213768,
                    longitude: 79.9641316,
                    key: "friend 2"
                }
            ],
        }, () => this._renderFriends());
    }

    _renderFriends() {
        const contents = this.state.friends.map((item) => {
            return (
                <MapView.Marker
                    key={item.key}
                    coordinate={{"latitude": item.latitude, "longitude": item.longitude}}
                    title={item.key}/>
            );
        });
        this.setState({contents})
    }

    render() {
        return (
            <Container>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.container}
                    showsUserLocation={true}
                    showsMyLocationButton={true}
                    zoomEnabled={true}
                    followsUserLocation={true}
                    initialRegion={{
                        latitude: this.state.latitude,
                        longitude: this.state.longitude,
                        latitudeDelta: 0.0158,
                        longitudeDelta: 0.0070
                    }}
                >
                    {!!this.state.latitude && !!this.state.longitude && <MapView.Marker
                        coordinate={{"latitude": this.state.latitude, "longitude": this.state.longitude}}
                        title={"You're here"} pinColor={'#3498db'}
                    />}
                    <View>{this.state.contents}</View>
                </MapView>
            </Container>
        );
    }
}
...