Question

我对原生反应非常陌生，因此我能够在其中显示地图和一些标记。但是我需要从远程服务器读取一组位置（坐标）并显示在地图上。换句话说，制造商需要改变他们的位置。

我尝试了几种不同的方法，但是这些方法都无济于事。如果任何人以前有经验，请帮助。

以下是我现有的代码。

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>
        );
    }
}

Answer 1

您可以使用以下代码定期更新从远程服务器接收的用户位置：

componentDidMount() {
   setTimeout(function () {

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

   }, 1000);
}

Answer 2

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>
        );
    }
}

react-native-maps：如何定期更新从远程服务器收到的用户位置

2 个答案: