我应该进行哪些更改才能在地图上添加标记？答案

【问题标题】：What changes should I make to add marker on the map?我应该进行哪些更改才能在地图上添加标记？
【发布时间】：2019-12-20 06:13:42
【问题描述】：

这是我目前实现的。我无法在地图上的当前位置添加标记。虽然我可以使用函数 findCoordinates() 获取当前位置和坐标，但我无法在地图上显示。请建议我哪里错了或者我该怎么办？

这是我与您分享的代码。请建议我更好的方法来做到这一点。提前致谢

export default class App extends React.Component {
  state = {
    mapRegion: null,
    hasLocationPermissions: false,
    locationResult: null,
    location: null,
  };

  componentDidMount() {
    this.getLocationAsync();
  }

  handleMapRegionChange = mapRegion => {
    this.setState({ mapRegion });
  };

  async getLocationAsync () {
    // permissions returns only for location permissions on iOS and under certain conditions, see Permissions.LOCATION
    const { status, permissions } = await Permissions.askAsync(
      Permissions.LOCATION
    );
    if (status === 'granted') {
      this.setState({ hasLocationPermissions: true });
      //  let location = await Location.getCurrentPositionAsync({ enableHighAccuracy: true });
      let location = await Location.getCurrentPositionAsync({});
      this.setState({ locationResult: JSON.stringify(location) });
      // Center the map on the location we just fetched.
      this.setState({
        mapRegion: {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
          latitudeDelta: 0.04,
          longitudeDelta: 0.05,
        },
      });
    } else { 
      alert('Location permission not granted');
    }
  };
    findCoordinates = () => {
        navigator.geolocation.getCurrentPosition(
            position => {
                const location = JSON.stringify(position);

                this.setState({ location }); 
            },
            error => Alert.alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
    };
  render() {
    return (
      <View style={styles.container}>
        <MapView

          style={styles.mapStyle}
          region={this.state.mapRegion}
          onRegionChange={this.handleMapRegionChange}



        />
        <Ionicons style = {{paddingLeft: 0}} name = "md-locate" size = {30} color = "red" 
        onPress = {this.findCoordinates}

        />

          <TouchableOpacity onPress={this.findCoordinates}>
                    <Text style={styles.welcome}>My Location</Text>
                    <Text>Location: {this.state.location}</Text>
                </TouchableOpacity>
      </View>   
    );
  }
}
App.navigationOptions = {
  title: 'Location',
  headerStyle: {
    backgroundColor: '#ff6666',
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:20
  },
};

【问题讨论】：

标签： react-native expo react-native-maps

【解决方案1】：

               import { Marker } from 'react-native-maps';

    //you need to set the initial latitude and longitude 
value with deltas and use the marker component from react-native-maps
                        <MapView
                      style={styles.mapStyle}
                      region={this.state.mapRegion}
                      onRegionChange={this.handleMapRegionChange}>
                   <Marker
                      coordinate={this.state.location}
                      title={marker.title}
                      description={marker.description}
                    />

                </MapView>

【讨论】：

【解决方案2】：

你可以试试下面

findCoordinates = () => {
  navigator.geolocation.getCurrentPosition(
    position => {
      this.setState({ location }); 
    },
    error => Alert.alert(error.message),
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  );
};

render() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.mapStyle}
        region={this.state.mapRegion}
        onRegionChange={this.handleMapRegionChange}
      >
        {this.state.location && (
          <MapView.Marker
            coordinate={this.state.location.coords} // <-- Pass coordinate { latitude: number, longitude: number }
          />
        )}
      </MapView>
    </View>
  )
}

【讨论】：