我应该做哪些更改才能在地图上添加标记？

Question

这是我目前实现的。我无法将标记添加到地图上的当前位置。虽然我能够使用函数 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
  },
};

Answer 1

你可以试试下面的方法

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

Answer 2

               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>

我应该做哪些更改才能在地图上添加标记？

What changes should I make to add marker on the map?

react-native

react-native-maps

expo