@react-google-maps/api的DirectionsRenderer与DirectionsService不渲染也无报错如何解决

常见问题及修复方案 #

• 组件嵌套错误：DirectionsRenderer 必须作为 GoogleMap 组件的直接或间接子组件，才能获取地图实例完成路线渲染，放在地图组件外部时不会抛出错误也不会输出任何可见内容。
• 响应校验逻辑缺失：仅判断response !== null不足以确认存在可渲染路线，需额外校验响应内routes数组长度是否大于0。部分请求成功但返回ZERO_RESULTS状态的响应不会触发报错，但没有有效路线可供渲染，可修改判断逻辑如下：

{response !== null && response?.routes?.length > 0 && (
  <DirectionsRenderer
    options={{
      directions: response,
      // 额外配置路线样式避免与地图底色重合导致不可见
      strokeColor: "#2196F3",
      strokeWeight: 4,
      strokeOpacity: 0.9
    }}
  />
)}

• 状态更新异常：如果response没有存储在useState管理的响应式状态中，而是存储在普通JS变量里，拿到服务返回结果后不会触发组件重渲染，自然不会渲染路线组件。
• 路线服务参数错误：确认调用方向服务时的origin、destination参数格式符合要求，travelMode参数匹配你需要的出行类型（比如驾车路线对应google.maps.TravelMode.DRIVING），参数格式错误也可能导致返回无有效路线的响应。

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