更新AirMapMarker管理的视图的coordinate属性时出错问题求助

Hey there, I’ve spotted the exact issue causing this error—let’s break it down and fix it quickly!

What’s Going Wrong? #

You’re passing the full origin and destination objects (which contain details, geometry data, etc.) directly to the coordinate prop of your <Marker> components. But the AirMap Marker component expects coordinate to be a plain object with only latitude and longitude properties—it doesn’t know how to parse the full place object you’re sending it.

Luckily, you already created the correct coordinate objects (originLoc and destinationLoc) earlier in your RouteMap component—you just aren’t using them for the markers!

Step-by-Step Fix #

1. Update the Marker components to use the originLoc and destinationLoc variables you already defined, instead of the raw origin/destination objects:

<MapView style={{ width: '100%', height: '100%' }}
  provider={PROVIDER_GOOGLE}
  showsUserLocation={true}
  initialRegion={{
    latitude: 28.450627,
    longitude: -16.263045,
    latitudeDelta: 0.0222,
    longitudeDelta: 0.0121,
  }}>
  <MapViewDirections
    origin={originLoc}
    destination={destinationLoc}
    apikey={GOOGLE_MAPS_APIKEY}
    strokeWidth={5}
    strokeColor="black"
  />
  <!-- Here's the fix -->
  <Marker coordinate={originLoc} title={'Origin'} />
  <Marker coordinate={destinationLoc} title="Destination" />
</MapView>

2. Add Safety Checks (Optional but Recommended)
   To avoid crashes if your route params are missing or the details/geometry data isn’t loaded correctly, use optional chaining and fallback values when creating your coordinate objects:

const originLoc = {
  latitude: origin?.details?.geometry?.location?.lat || 28.450627, // Fallback to your initial region lat
  longitude: origin?.details?.geometry?.location?.lng || -16.263045, // Fallback to your initial region lng
};
const destinationLoc = {
  latitude: destination?.details?.geometry?.location?.lat || 28.450627,
  longitude: destination?.details?.geometry?.location?.lng || -16.263045,
};

Why This Works #

By passing the properly formatted originLoc and destinationLoc (which only have the latitude and longitude values the Marker needs), you’re giving the AirMap component exactly what it expects for the coordinate prop—no more parsing errors!

内容的提问来源于stack exchange，提问作者Muzammil Khan