How to create custom route callouts for polylines like Google Maps in React Native Maps? - Stack Overflow

admin管理员组

文章数量:1287591

I'm building a traffic and accident hotspot app using React Native Maps and Google Maps Directions API. I want to display custom callouts showing the route duration—similar to Google Maps—like this:

I'm trying to copy this

My current implementation: I’ve created a custom route callout and rendered it as a child of the Marker, but I’m running into an issue — if the callout box is large, it gets cut off.

`<MapView
  ref={mapRef}
  style={styles.map}
  showsTraffic={true}
  initialRegion={{
    latitude: location?.latitude || 14.5995,
    longitude: location?.longitude || 120.9842,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  }}
>
  {location && (
    <Marker coordinate={location} title="Your Location">
      <Image
        source={require("../../../assets/images/car.png")}
        style={{ width: 30, height: 30, resizeMode: "contain" }}
      />
    </Marker>
  )}

  {routesCoordinates.map((route, index) => (
    <React.Fragment key={index}>
      <Polyline
        coordinates={route.coordinates}
        tappable={true}
        onPress={() => setChosenRouteIndex(index)}
        strokeColor={index === chosenRouteIndex ? "red" : "gray"}
        strokeWidth={index === chosenRouteIndex ? 6 : 4}
      />
      <Marker coordinate={route.midPoint} anchor={{ x: 0.5, y: 0 }}>
        <RouteCallout
          duration={route.duration}
          isSelected={index === chosenRouteIndex}
        />
      </Marker>
    </React.Fragment>
  ))}
</MapView>`

Custom Route Callout Component:

`const RouteCallout = ({ duration, isSelected }) => {
  const minutes = Math.round(duration / 60);

  return (
    <View style={styles.calloutContainer}>
      <View style={[
        styles.routeCallout,
        { backgroundColor: isSelected ? '#ff4444' : '#fff' }
      ]}>
        <Text style={{ fontWeight: 'bold', color: isSelected ? '#fff' : '#000' }}>
         {minutes} min
        </Text>
      </View>
    </View>
  );
};`

Issue The custom callout works but gets cut off if the container is larger than the marker's bounds. I want the callout to render freely, without clipping.

How can I create custom route callouts like Google Maps without being clipped? Would love to hear any workarounds or best practices! Thanks in advance.

本文标签： How to create custom route callouts for polylines like Google Maps in React Native MapsStack Overflow