React Native Google Maps自定义路线设置：忽略最短路径绕行指定点位

你当前代码的问题是仅单独渲染了预设蓝色点位的绕行路线，未将这些点位作为途经点传入实际生效的起点-终点路线查询接口，因此接口始终返回默认最短路径。

修改逻辑 #

react-native-maps-directions 组件支持传入waypoints参数指定途经点，只需按要求的绕行顺序排列点位传入，同时关闭途经点自动优化即可实现自定义绕行路线。

具体修改步骤 #

• 按你要求的绕行顺序整理预设点位为途经点数组
• 给实际查询路线的MapViewDirections组件传入waypoints参数，同时设置optimizeWaypoints={false}，禁止谷歌地图自动调整途经点顺序生成最短路径
• 多余的蓝色路线渲染组件可根据需求保留或删除

修改后代码示例 #

import React from 'react';
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

import { PinchGestureHandler } from 'react-native-gesture-handler';

const GOOGLE_MAPS_APIKEY = 'API_KEY';

const RouteMap = ({ origin, destination }) => {

  const originLoc = {
    latitude: origin.details.geometry.location.lat,
    longitude: origin.details.geometry.location.lng,
  };

  const destinationLoc = {
    latitude: destination.details.geometry.location.lat,
    longitude: destination.details.geometry.location.lng,
  };

  // 预设绕行点位
  const smClark = {
    latitude: 15.166958649105302,
    longitude: 120.58020821518215
  };

  const crkAirport = {
    latitude: 15.188257381909379,
    longitude: 120.54864679960974
  };
  
  const puregold = {
    latitude: 15.193613083464797,
    longitude: 120.5301874657224
  };

  const royceHotel = {
    latitude: 15.180685277215424,
    longitude: 120.52912493815806
  };

  const mGate_1 = {
    latitude: 15.166953827506548,
    longitude: 120.58283672474597
  };

  const mGate_2 = {
    latitude: 15.167813741260368,
    longitude: 120.5829972483142
  };

  // 按绕行顺序组装途经点数组，可根据实际需求调整顺序
  const customWaypoints = [
    smClark,
    crkAirport,
    puregold,
    royceHotel,
    mGate_1,
    mGate_2
  ]
  
  return ( 
    <MapView
      style={{width: '100%', height: '100%'}}
      provider={PROVIDER_GOOGLE}
      initialRegion={{
        latitude: 15.166958649105302,
        longitude: 120.58020821518215,
        latitudeDelta: 0.015,
        longitudeDelta: 0.015,
        }}
      zoomControlEnabled
        >
      {/* 自定义绕行路线，传入途经点并关闭自动优化 */}
      <MapViewDirections
        origin={originLoc}
        destination={destinationLoc}
        apikey={GOOGLE_MAPS_APIKEY}
        strokeWidth={7}
        strokeColor="black"
        waypoints={customWaypoints}
        optimizeWaypoints={false}
        />
      
      {/* 原有蓝色预设路线可根据需求选择保留或删除 */}
    </MapView>
  );
};

export default RouteMap;

额外说明 #

如果需要强制车辆完整走预设环线，忽略用户输入的起点终点，直接将origin设为环线起点smClark，destination设为环线终点smClark即可。

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