使用useMapsLibrary加载Google Geocoding API失败求助

你的核心问题是所有@vis.gl/react-google-maps提供的钩子必须在APIProvider的上下文范围内调用，但你的代码在Maps组件顶层直接使用了useMapsLibrary、useApiIsLoaded、useApiLoadingStatus这些钩子，之后才在return里渲染APIProvider——这会导致钩子无法获取到Google Maps API的上下文，自然无法加载geocoding库，也无法正确获取API加载状态。

修复步骤 #

1. 重构组件结构，将钩子移到APIProvider内部 #

把需要使用钩子的逻辑放到APIProvider包裹的子组件中，确保钩子能访问到API上下文。修改后的代码示例：

import {
    APILoadingStatus,
    APIProvider,
    Map,
    useApiIsLoaded,
    useApiLoadingStatus,
    useMapsLibrary
} from "@vis.gl/react-google-maps";
import MarkerWithInfoWindow from "./MarkerWithInfoWindow";
import {useEffect, useState} from "react";

// 内部组件承载地图逻辑，在APIProvider内部渲染
const MapContent = () => {
    const geocoderLib = useMapsLibrary('geocoding');
    const apiIsLoaded = useApiIsLoaded();
    const status = useApiLoadingStatus();
    const [markerPosition, setMarkerPosition] = useState({ lat: 53.54992, lng: 10.00678 });

    useEffect(() => {
        console.log("API Loaded:", apiIsLoaded);
        console.log("Status:", status);
        console.log("Geocoder Library:", geocoderLib);
        
        const handleGeocode = () => {
            if (status !== APILoadingStatus.LOADED || !geocoderLib) return;

            const fullAddress = `fullAddress`;
            const geocoder = new geocoderLib.Geocoder();

            geocoder.geocode({ address: fullAddress }, (results, geocodeStatus) => {
                if (geocodeStatus === 'OK') {
                    console.log(`Geocode successful:`, results);
                    setMarkerPosition({lat: 53.54992, lng: 10.00678})
                } else {
                    alert('Geocode was not successful for the following reason: ' + geocodeStatus);
                }
            });
        };

        if (apiIsLoaded && status === APILoadingStatus.LOADED) {
            handleGeocode();
        }

    }, [apiIsLoaded, status, geocoderLib])

    return (
        <Map
            style={{width: '50vw', height: '50vh'}}
            defaultCenter={{lat: 53.54992, lng: 10.00678}}
            zoom={5}
            mapId="<你的Map ID>"
            gestureHandling={'greedy'}
            disableDefaultUI={true}
        >
            <MarkerWithInfoWindow position={markerPosition} />
        </Map>
    )
}

const Maps = () => {
    return (
        <APIProvider apiKey="<你的API密钥>">
            <MapContent />
        </APIProvider>
    )
}

export default Maps

2. 额外注意事项 #

• 替换代码中的<你的API密钥>和<你的Map ID>为实际有效值，不要保留占位符
• 所有依赖Google Maps API上下文的逻辑，必须放在APIProvider内部的组件中
• 你之前完成的排查项（API密钥正确、启用Geocoding API、无API限制、Map ID正确）均有效，组件结构修复后这些配置即可正常生效

失效原因说明 #

@vis.gl/react-google-maps的钩子依赖APIProvider提供的React上下文来初始化和加载Google Maps服务，当钩子在Provider外部调用时，无法获取到上下文，因此useMapsLibrary返回null，useApiLoadingStatus返回NOT_LOADED，最终导致handleGeocode无法执行。

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