React Native Maps点击地图投标记点报错求助：空纬度问题

嘿，我帮你揪出问题根源啦——你遇到的这个报错，核心是标记点的坐标格式没传对，另外代码里还有几处小bug需要修正，咱们一步步来解决：

问题1：标记点的坐标嵌套错误 #

你在markerPress里把坐标存在了marker对象的子属性里，但渲染MapView.Marker时直接把整个对象传给了coordinate属性，这就导致组件找不到正确的latitude和longitude字段（它们藏在marker.marker里，而组件期望直接拿到这两个字段）。

修正超简单，直接把坐标对象赋值给marker状态就行：

const markerPress = (event) => {
  // 去掉多余的嵌套，直接存储坐标对象
  setMarker(event.nativeEvent.coordinate)
}

问题2：useEffect里的位置赋值bug #

你的useEffect里有个明显的错误：setLocation(location)这里的location是初始的null，等于根本没更新位置状态，应该改成：

setLocation(coordinates);

问题3：处理地图加载前的空状态 #

因为mapRegion初始是null，在位置权限请求完成前，地图的initialRegion会是null，虽然组件可能不会崩溃，但最好加个加载状态或者默认区域，避免潜在问题。比如在返回前判断，如果mapRegion还没加载出来，显示个加载提示：

if (!mapRegion) {
  return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
           <Text>{errorMsg ? errorMsg : '加载地图中...'}</Text>
         </View>
}

完整修正后的代码 #

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import * as Location from "expo-location";

function HomeScreen({navigation}) {
  const [location, setLocation] = useState(null);
  const [mapRegion, setMapRegion] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [marker, setMarker] = useState(null)

  const markerPress = (event) => {
    // 修正：直接存储坐标对象
    setMarker(event.nativeEvent.coordinate)
  }

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
        return; // 权限拒绝后不再执行后续逻辑
      }
      let coordinates = await Location.getCurrentPositionAsync({});
      // 修正：把获取到的真实坐标赋值给location状态
      setLocation(coordinates);
      setMapRegion({
        longitude: coordinates.coords.longitude,
        latitude: coordinates.coords.latitude,
        longitudeDelta: 0.0922,
        latitudeDelta: 0.0421
      });
    })();
  }, []);

  // 处理地图加载前的空状态，提升用户体验
  if (!mapRegion) {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        {errorMsg ? <Text>{errorMsg}</Text> : <Text>加载地图中...</Text>}
      </View>
    )
  }

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      onPress={markerPress}
      style={{flex:1}}
      // customMapStyle={generatedMapStyle} // 确保generatedMapStyle已定义或注释掉该行
      showsUserLocation={true}
      followsUserLocation={true}
      showsMyLocationButton={true}
      initialRegion={mapRegion}>
      {/* 现在marker是正确的坐标对象，可以直接传给coordinate属性 */}
      { marker && <MapView.Marker coordinate={marker} /> }
    </MapView>
  )
}

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

export default HomeScreen;

额外小提示 #

• 如果你用的是Google Maps provider，要确保已经正确配置了API密钥，不然地图可能加载不出来。
• 如果generatedMapStyle是自定义地图样式，要确认它已经正确定义并导入，否则先注释掉这一行避免额外报错。

内容的提问来源于stack exchange，提问作者Josip Marić