使用react-google-maps-api无法显示Google Maps路线折线

你遇到的DirectionsRenderer仅显示自定义标记、不渲染路线折线的问题，大概率是以下几个原因导致的，对应修复方案如下：

1. 异步逻辑错误：directionsService.route未正确处理Promise #

你的handleDirections用了async/await，但原生google.maps.DirectionsService.route是回调式API，不会返回Promise，await无法等待回调执行完成，可能导致directionsResponse状态更新时机异常。

修复代码： #

把directionsService.route封装成Promise，确保状态正确更新：

const handleDirections = async () => {
  const origin = { lat: 31.5882, lng: 74.3154 };
  const destination = { lat: 31.5773, lng: 74.3363 };
  const request = {
    origin,
    destination,
    travelMode: google.maps.TravelMode.DRIVING,
  };

  const directionsService = new google.maps.DirectionsService();
  // 封装成Promise
  try {
    const response = await new Promise((resolve, reject) => {
      directionsService.route(request, (res, status) => {
        if (status === "OK") resolve(res);
        else reject(new Error("Error getting directions"));
      });
    });

    setDistance(response.routes[0].legs[0].distance.text);
    setDuration(response.routes[0].legs[0].duration.text);
    setDirectionsResponse(response);
    const leg = response.routes[0].legs[0];
    setMarker({
      start: leg.start_location,
      end: leg.end_location,
    });
  } catch (err) {
    console.log(err.message);
  }
};

2. 显式绑定DirectionsRenderer到地图实例 #

react-google-maps-api的DirectionsRenderer有时需要显式指定map属性才能正确渲染，尤其是当地图状态更新后。可以通过useMap钩子获取当前地图实例：

修复步骤： #

1. 导入useMap钩子：

import { useMap, ... } from "@react-google-maps/api";

2. 在GoogleMap组件内部使用useMap获取地图实例，然后传递给DirectionsRenderer：

{directionsResponse && (
  <DirectionsRenderer
    directions={directionsResponse}
    map={useMap()} // 显式绑定地图实例
    options={{
      suppressMarkers: true,
      // 额外指定路线样式，确保可见
      polylineOptions: {
        strokeColor: "#FF0000",
        strokeWeight: 5,
      },
    }}
  />
)}

3. 修复状态更新的陈旧引用问题 #

你的setMarker用了...marker，但在函数组件中，marker是闭包捕获的旧状态，可能导致状态更新不完整。改用函数式更新：

setMarker(prev => ({
  ...prev,
  start: leg.start_location,
  end: leg.end_location,
}));

额外排查点 #

• 确认directionsResponse.routes[0]存在overview_path或legs[0].steps（可在控制台打印directionsResponse验证），如果路线数据本身缺失，需检查DirectionsService的请求参数是否正确。
• 检查地图容器的z-index，确保DirectionsRenderer的折线没有被其他元素覆盖。

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