Question

在地图位置更改期间，我需要从服务器获取指针位置，并将这些新的指针位置反映在地图上。如何动态显示

App.js

 constructor(props) {
        super(props);

        this.state = {
            markers: [{
                coordinates: {
                    lat:37.189938,
                    lng: 33.217167
                },
                altitude: 0,
                speed: 0,
                course: 0,
            },]
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView>

                    {this.state.markers.map((marker, index) =>
                        ( <MapView.Marker
                            key={index}
                            image={require('./assets/arrow.png')}
                            coordinate={marker.coordinates}
                            style={{
                                transform: [
                                    {
                                        rotate: course + 'deg',
                                    },

                                ],
                            }}
                            />
                            ))}
                </MapView>

在这里，我正在分割服务器中的数据

    updateMap(message) {
    var [lat, lng, altitude, speed, course] = message.toString().split(',');
    this.setState({
        lat: parseFloat(lat),
        lng: parseFloat(lng),
        altitude,
        speed,
        course,
    });
}

Answer 1

这是因为从服务器获取数据时不会更新标记值。由于仅获取坐标，因此必须始终更新坐标状态。
不是采取coordinate={marker.coordinates}，而是采取 coordinate={this.state.coordinates}在您的呈现标记代码中。

将状态下的坐标初始化为空变量，就像下面的

 this.state = {
     coordinates: {
         lat:0,
         lng:0
    },
 }

并在从服务器获取数据时更新坐标状态。

updateMap(message) {
    var [lat, lng, altitude, speed, course] = message.toString().split(',');
    let tempCoordinates = {
        lat: parseFloat(lat),
        lng: parseFloat(lng),
    } 
    this.setState({
        coordinates: tempCoordinates,
    });
}

React Native如何显示从服务器获取的标记

1 个答案: