@react-google-maps/api使用DrawingManager提示未引入drawing库报错如何解决

核心原因 #

报错是因为加载Google Maps JS API时未引入drawing附加库，DrawingManager不属于基础地图API的能力范围，必须单独声明加载该库才能正常使用。

修复后的代码 #

import React from "react";
import {
    GoogleMap,
    LoadScript,
    Data,
    DrawingManager,
} from "@react-google-maps/api";

const containerStyle = {
    width: "100%",
    height: "600px",
};

function MyComponent(props) {
    return (
        <LoadScript
            googleMapsApiKey="API_KEY"
            {/* 新增此行，指定加载drawing库 */}
            libraries={['drawing']}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={{
                    lat: props.lat_centro,
                    lng: props.long_centro,
                }}
                zoom={16}
            >
                {/* Child components, such as markers, info windows, etc. */}
                <DrawingManager />
                <></>
            </GoogleMap>
        </LoadScript>
    );
}

export default React.memo(MyComponent);

注意事项 #

• libraries属性接收数组格式参数，如需同时加载其他附加库（如places、geometry等），直接追加到数组内即可，例：libraries={['drawing', 'places']}
• 修改后请清空浏览器缓存并重启本地开发服务，避免旧的API加载缓存导致问题仍然出现

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