如何用React Native Map和Maps Directions实现谷歌地图同款路线并解决重叠问题

我正在开发一款React Native配送应用，使用react-native-google-map和react-native-google-maps-directions组件实现多点往返路线功能。目前已在代码中添加路线，但无法实现谷歌地图同款的路线样式，且打开地图模块时，返回路线（浅蓝）有时会与去程路线（深蓝）重叠。

请问如何实现与谷歌地图完全一致的路线样式？

以下是我的代码：

<MapView
  provider={PROVIDER_GOOGLE}
  showsUserLocation={true}
  followsUserLocation={true}
  ref={mapRef}
  style={styles.map}
  initialRegion={{
    ...state.locationData,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  }}>
  {/* <RotatingMarker coordinate={state.locationData} /> */}
  {markers.map(marker => (
    <Marker
      tracksViewChanges={Platform.OS === 'ios' ? true : false}
      key={marker.id}
      coordinate={marker.coordinate}
      title={marker.title}
      description={marker.description}
      pinColor={
        marker.id === nearestLocation?.id ? '#0F53FF' : '#AECBFA'
      }>
      <LottieView
        source={require('../../assets/lottie/HomeLocationPin.json')}
        autoPlay
        loop
        style={styles.animation}
      />
    </Marker>
  ))}

  <MapViewDirections
    tappable={true}
    precision="high"
    resetOnChange={false}
    origin={markers[markers.length - 1].coordinate}
    destination={state.locationData}
    apikey={GOOGLE_MAPS_APIKEY}
    strokeWidth={5}
    strokeColor={'#AECBFA'}
    onReady={result => {}}
    onError={errorMessage => {
      console.error('Error return route:', errorMessage);
    }}
  />

  <MapViewDirections
    tappable={true}
    precision="high"
    resetOnChange={false}
    origin={state.locationData}
    destination={markers[markers.length - 1].coordinate}
    waypoints={markers
      .slice(0, markers.length - 1)
      .map(marker => marker.coordinate)}
    optimizeWaypoints={true}
    apikey={GOOGLE_MAPS_APIKEY}
    strokeWidth={7}
    strokeColor={'#0F53FF'}
    onReady={result => {}}
    onError={errorMessage => {
      console.error('Error going route:', errorMessage);
    }}
  />
</MapView>

一、实现谷歌地图同款路线样式 #

谷歌地图的路线核心是主路线带白色描边，返程路线用区分色且同样带描边，视觉上和官方完全一致，具体实现方式：

1. 叠加两层路线模拟描边效果 #

react-native-google-maps-directions不支持直接设置多层描边，我们可以叠加两个组件：底层用粗白色线条当描边，上层用目标颜色的细线条当主路线。

修改去程路线示例：

{/* 去程路线白色描边（比主路线粗2px） */}
<MapViewDirections
  key="going-route-stroke"
  tappable={true}
  precision="high"
  resetOnChange={false}
  origin={state.locationData}
  destination={markers[markers.length - 1].coordinate}
  waypoints={markers.slice(0, markers.length - 1).map(marker => marker.coordinate)}
  optimizeWaypoints={true}
  apikey={GOOGLE_MAPS_APIKEY}
  strokeWidth={9}
  strokeColor={'#FFFFFF'}
  onReady={result => {}}
  onError={errorMessage => {
    console.error('Error going route stroke:', errorMessage);
  }}
/>
{/* 去程主路线 */}
<MapViewDirections
  key="going-route-main"
  tappable={true}
  precision="high"
  resetOnChange={false}
  origin={state.locationData}
  destination={markers[markers.length - 1].coordinate}
  waypoints={markers.slice(0, markers.length - 1).map(marker => marker.coordinate)}
  optimizeWaypoints={true}
  apikey={GOOGLE_MAPS_APIKEY}
  strokeWidth={7}
  strokeColor={'#4285F4'} // 谷歌官方蓝色，替换原#0F53FF
  onReady={result => {}}
  onError={errorMessage => {
    console.error('Error going route:', errorMessage);
  }}
/>

返程路线同理，底层白色描边，上层用谷歌官方浅蓝#8AB4F8或你习惯的#AECBFA即可。

2. 匹配官方颜色参数 #

谷歌地图标准路线颜色参考：

• 去程主路线：#4285F4
• 返程路线：#8AB4F8
• 统一描边：#FFFFFF

二、解决往返路线重叠问题 #

路线重叠是因为API默认返回的往返路线可能走同一条道路，以下几种方法可以解决：

1. 添加实时交通参数 #

在MapViewDirections中加入departureTime参数，API会根据实时路况返回更贴合实际的路线，减少重叠概率：

departureTime={new Date().toISOString()}

2. 手动偏移返程路线坐标 #

如果API返回的路线还是重叠，可以在onReady回调里拿到路线坐标，对每个坐标做微小偏移，然后用Polyline组件自定义绘制：

import { Polyline } from 'react-native-maps';

// 返程路线的onReady回调
onReady={(result) => {
  // 给每个坐标加微小偏移，避免和去程重叠
  const offsetCoords = result.coordinates.map(coord => ({
    latitude: coord.latitude + 0.0001,
    longitude: coord.longitude + 0.0001
  }));
  // 把偏移后的坐标存到state里
  setState(prev => ({...prev, returnRoute: offsetCoords}));
}}

// 在MapView里添加Polyline组件绘制返程路线
{state.returnRoute && (
  <Polyline
    key="return-route-polyline"
    coordinates={state.returnRoute}
    strokeWidth={5}
    strokeColor={'#AECBFA'}
    strokeDashPattern={[5, 3]} // 可选：用虚线区分返程路线
  />
)}

3. 区分出行模式（备选） #

如果场景允许，给返程路线设置不同的travelMode，比如去程DRIVING，返程WALKING，但配送应用大多还是用DRIVING，这个方法仅作备选。

三、代码优化小技巧 #

• 把重复的配置（比如precision、resetOnChange）抽成常量，减少代码冗余
• 给每个路线组件加唯一key，确保React能正确更新组件
• 在onReady里调用mapRef.current.fitToCoordinates(result.coordinates)，让地图自动适配路线范围

内容的提问来源于stack exchange，提问作者Jaswin Prakash K