MapViewDirections仅显示单一路线，如何获取备选路线？

MapViewDirections组件默认仅返回最优路线，要实现类似谷歌地图的灰色备选路线效果，需要直接调用对应平台的地图API获取多路线数据，再手动渲染到地图上。

步骤1：调用地图API获取多路线数据 #

谷歌地图API（Android） #

调用Directions API时添加alternatives=true参数，即可获取最多3条备选路线：

const fetchGoogleAlternativeRoutes = async (origin, destination) => {
  const originStr = `${origin.latitude},${origin.longitude}`;
  const destStr = `${destination.latitude},${destination.longitude}`;
  const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originStr}&destination=${destStr}&alternatives=true&key=${googleAPIKey}`;
  
  const response = await fetch(url);
  const data = await response.json();
  return data.routes; // routes数组包含主路线和所有备选路线
};

苹果MapKit（iOS） #

使用MapKit的MKDirections请求时，设置requestsAlternateRoutes = true即可获取备选路线。iOS端需通过原生代码封装或第三方桥接库实现API调用，确保配置好info.plist中的地图权限（如NSLocationWhenInUseUsageDescription）。

步骤2：解析数据并渲染多条路线 #

拿到所有路线数据后，用MapView.Polyline组件分别渲染，主路线用深色高亮，备选路线用灰色虚线区分：

import MapView, { Marker, Polyline } from 'react-native-maps';

const [routes, setRoutes] = useState([]);

// 监听起点终点变化，获取路线数据
useEffect(() => {
  if (origin && destination) {
    fetchGoogleAlternativeRoutes(origin, destination)
      .then(fetchedRoutes => setRoutes(fetchedRoutes))
      .catch(err => console.error('获取路线失败:', err));
  }
}, [origin, destination]);

return (
  <MapView
    ref={mapRef}
    style={styles.map}
    initialRegion={middleOfDenmark}
  >
    {origin && <Marker coordinate={origin} />}
    {destination && <Marker coordinate={destination} />}
    {routes.map((route, index) => {
      // 解码路线的polyline坐标
      const coordinates = Polyline.decode(route.overview_polyline.points);
      // 主路线用深色粗线，备选路线用灰色虚线
      return (
        <Polyline
          key={`route-${index}`}
          coordinates={coordinates}
          strokeColor={index === 0 ? '#112D4E' : '#AAAAAA'}
          strokeWidth={index === 0 ? 4 : 3}
          lineDashPattern={index !== 0 ? [5, 3] : []}
        />
      );
    })}
  </MapView>
);

额外优化建议 #

• 可给每条路线添加时长、距离标签，点击标签时切换主路线样式
• 处理API请求失败的情况，给用户显示错误提示
• 谷歌API需确保密钥已启用Directions API权限

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