使用@react-google-maps/api添加TrafficLayer触发b/369845599错误崩溃

错误b/369845599是Google Maps JavaScript API的内部错误，结合你仅添加TrafficLayer时触发崩溃的情况，大概率是API加载配置缺失、库版本兼容问题或组件使用时机不当导致的，以下是具体排查和修复步骤：

1. 确认Google Maps API加载时包含Traffic库 #

TrafficLayer依赖Maps JavaScript API的traffic库扩展，必须在加载API时显式声明该库：

import { LoadScript, GoogleMap, TrafficLayer } from '@react-google-maps/api';

// 在LoadScript组件中指定libraries参数
<LoadScript
  googleMapsApiKey="你的API密钥"
  libraries={["traffic", "directions"]} // 必须包含"traffic"
>
  <GoogleMap mapContainerStyle={mapContainerStyle} zoom={12} center={defaultCenter}>
    {/* 你的Marker、DirectionsRenderer等组件 */}
    {showTrafficLayer && <TrafficLayer />}
  </GoogleMap>
</LoadScript>

如果之前未添加libraries={["traffic"]}，API无法加载TrafficLayer所需资源，就会触发该错误。

2. 检查@react-google-maps/api版本兼容性 #

部分旧版本的@react-google-maps/api与最新Google Maps JS API存在适配问题，尝试升级到最新稳定版：

npm install @react-google-maps/api@latest
# 或 yarn add @react-google-maps/api@latest

若升级后问题依旧，可尝试降级到已知兼容的版本（比如^2.19.0）再测试。

3. 确保TrafficLayer在地图初始化完成后渲染 #

如果TrafficLayer在地图实例未完全初始化时就被渲染，可能触发内部错误。可通过GoogleMap的onLoad回调控制渲染时机：

import { useState } from 'react';
import { GoogleMap, TrafficLayer } from '@react-google-maps/api';

const [mapReady, setMapReady] = useState(false);

// ...

<GoogleMap
  mapContainerStyle={mapContainerStyle}
  zoom={12}
  center={defaultCenter}
  onLoad={() => setMapReady(true)} // 地图初始化完成后标记状态
>
  {/* 其他组件 */}
  {showTrafficLayer && mapReady && <TrafficLayer />}
</GoogleMap>

4. 验证API密钥的权限配置 #

再确认以下两点权限配置：

• 确保Google Cloud控制台中，你的API密钥已绑定Maps JavaScript API（TrafficLayer属于该API功能，无需单独启用Traffic API）；
• 检查密钥是否设置了IP/域名限制，若有限制，确保当前开发环境的IP/域名在允许列表内。

5. 排除组件冲突 #

暂时注释掉DirectionsRenderer组件，仅保留TrafficLayer测试是否还会崩溃。若此时正常，说明两个组件渲染存在冲突，可尝试调整TrafficLayer的渲染优先级，或通过状态控制两者不同时渲染（一般不会出现此情况，仅作排查用）。

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