在 React Native 地图中选择位置的问题

Question

我使用

react-native-maps

让用户从地图中选择一个位置。但是，在选择位置之前我必须单击多次，并且标记会更新其位置。这是性能问题，还是我的代码有问题？

预期行为： 当用户单击地图上的某个位置时，标记应立即移动到新位置，并且位置名称应插入到

selectedLocation

状态。

这是我的组件：

const LocationScreen = () => {
  const [selectedLocation, setSelectedLocation] = useState('');
  const [markerCoordinates, setMarkerCoordinates] = useState({ latitude: 24.4539, longitude: 54.3773 });

  const API_KEY = '893*********************';

  const handleMapPress = async (event) => {
    const { latitude, longitude } = event.nativeEvent.coordinate;
    try {
      const response = await axios.get(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${API_KEY}`);
      const components = response.data.results[0].components;
      const location =
        components.town ||
        components.city ||
        components.village ||
        components.hamlet ||
        components.locality ||
        components.country;

      if (location) {
        setSelectedLocation(location);
        setMarkerCoordinates({ latitude, longitude });
      } else {
        setSelectedLocation('Unknown location');
      }
    } catch (error) {
      console.error("Error fetching location data: ", error);
    }
  };

  return (
    <View style={styles.container}>
      <StatusBar
        backgroundColor="transparent"
        barStyle="dark-content"
        translucent={true}
      />
      <SafeAreaView style={styles.form}>
        <View style={styles.head}>
          <BackArrow /> {/* Assuming BackArrow is a valid component */}
          <Text style={styles.title}>Location</Text>
        </View>
        <MapView
          style={{ width: '100%', height: "100%" }}
          initialRegion={{
            latitude: 24.4539,
            longitude: 54.3773,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onPress={handleMapPress}
        >
          {markerCoordinates && (
            <Marker
              coordinate={markerCoordinates}
              title={selectedLocation}
            />
          )}
        </MapView>
        {selectedLocation && (
          <View style={styles.selectedLocationContainer}>
            <Text style={styles.selectedLocationText}>Selected Location: {selectedLocation}</Text>
          </View>
        )}
      </SafeAreaView>
    </View>
  );
};

export default LocationScreen;

Answer 1

设置第一个坐标 (

setMarkerCoordinates

)，这会导致出现标记，然后将坐标转换为位置并使用地点名称 (

setSelectedLocation

) 更新标记。这样可以消除网络延迟，并为用户带来更快响应的感觉。像这样的东西：

const handleMapPress = async (event) => {
  const { latitude, longitude } = event.nativeEvent.coordinate;
  setMarkerCoordinates({ latitude, longitude });

  try {
    const response = await axios.get(
      `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${API_KEY}`
    );
    const components = response.data.results[0].components;
    const location =
      components.town ||
      components.city ||
      components.village ||
      components.hamlet ||
      components.locality ||
      components.country;

    if (location) {
      setSelectedLocation(location);
    } else {
      setSelectedLocation('Unknown location');
    }
  } catch (error) {
    console.error('Error fetching location data: ', error);
  }
};