Question

我需要您的帮助，以了解如何在从API获取的地图上呈现标记。

我想通过从API获取数据来从gps坐标（经度和纬度）跟踪一个人的位置。

我花了很多时间来恢复MapView中的坐标，但是我没有来做。

这是我的代码：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

export default class App extends React.Component {
  mapMarkers() {
    return fetch('http://first-ontheweb.com/onLineSenior/pos.php')
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          marker: responseJson.data,
        });
        console.log(responseJson);
        return responseJson.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
  componentDidMount() {
    this.mapMarkers();
    navigator.geolocation.getCurrentPosition(
      position => {
        console.log('getCurrentPosition Succes'); 
        this.setState({
          region: {
            ...this.state.region,
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          },
        });
        this.watchPosition();
      },
      error => {
        this.props.displayError('Error detecting your Location');
        alert(JSON.stringify(error));
      },
      { enableHightAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }
  watchPosition() {
    this.watchID = navigator.geolocation.watchPosition(
      position => {
        console.log('Watch Position Succes');
        if (this.props.followUser) {
          this.map.animateToRegion(
            this.newRegion(position.coords.latitude, position.coords.longitude)
          );
        }
      },
      error => {
        this.props.displayError('Error detecting your location');
      },
      { enableHightAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }
  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }
  onRegionChange(region) {
    this.setState({ region });
  }
  
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: -6.914744,
        longitude: 107.60981,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      },
      markers: [
         
        {
          latlng: { latitude: marker.latitude, longitude: marker.longitude },
        },
      ],
    }; 
    this.onRegionChange = this.onRegionChange.bind(this);
  }

  render() {
    return (
      <MapView
        style={styles.map}
        showsUserLocation={true}
        followUserLocation={true}
        zoomEnabled={true}
        //annotations={markers}
      >
        {this.state.markers.map((marker, index) => (
          <MapView.Marker 
          key={index} 
          coordinate={marker.latlng} />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

这是错误：

ESLint: (76:59) 'marker' is not defined. (no-undef)

因此，我想通过从API获取数据来在MapView中显示GPS坐标。

Answer 1

我认为这是一个错字在setState中应为markers而不是marker

this.setState({
          markers: responseJson.data,
 });

Answer 2

尝试使用此代码，我对其进行了更改，现在可以正常使用

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

export default class App extends React.Component {
  mapMarkers() {
    return fetch('http://first-ontheweb.com/onLineSenior/pos.php')
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          markers: responseJson,
        });
        console.log(responseJson);
        return responseJson;
      })
      .catch(error => {
        console.error(error);
      });
  }
  componentDidMount() {
    this.mapMarkers();
    navigator.geolocation.getCurrentPosition(
      position => {
        console.log('getCurrentPosition Succes'); 
        this.setState({
          region: {
            ...this.state.region,
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          },
        });
        this.watchPosition();
      },
      error => {
        this.props.displayError('Error detecting your Location');
        alert(JSON.stringify(error));
      },
      { enableHightAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }
  watchPosition() {
    this.watchID = navigator.geolocation.watchPosition(
      position => {
        console.log('Watch Position Succes');
        if (this.props.followUser) {
          this.map.animateToRegion(
            this.newRegion(position.coords.latitude, position.coords.longitude)
          );
        }
      },
      error => {
        this.props.displayError('Error detecting your location');
      },
      { enableHightAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }
  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }
  onRegionChange(region) {
    this.setState({ region });
  }

  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: -6.914744,
        longitude: 107.60981,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      },
      markers: []
    }; 
    this.onRegionChange = this.onRegionChange.bind(this);
  }

  render() {
    console.log('marker', this.state.markers)
    return (
      <MapView
        initialRegion={this.state.region}
        style={styles.map}
        showsUserLocation={true}
        followUserLocation={true}
        showsMyLocationButton={true}
        //annotations={markers}
      >
        {this.state.markers && this.state.markers.map((marker, index) => (
          <MapView.Marker 
          key={index} 
          coordinate={{
            latitude: Number(marker.latitude),
            longitude: Number(marker.longitude),
        }}
            />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

如何在从API获取的地图上呈现标记？

2 个答案: