如何在@react-google-maps/api中渲染地图并使用Drawing Manager绘制多边形？

我在使用react-hook-form@7.33.1的项目中，尝试通过@react-google-maps/api@2.12.1渲染地图组件，需求是点击输入框时显示地图，用户需借助Drawing Manager在地图上绘制多边形。已花费两天调试仍未解决问题，查阅Stack Overflow后发现多数答案过时或针对旧版react-google-maps。奇怪的是，完全相同的代码在Codesandbox中可正常运行，不清楚本地哪里出错了，相关代码如下：

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

const containerStyle = {
  width: "400px",
  height: "400px",
};

const API_KEY = "";

export default function GoogleMaps() {
  const [state, setState] = React.useState({
    drawingMode: "polygon",
  });

  const noDraw = () => {
    setState(function set(prevState) {
      return Object.assign({}, prevState, {
        drawingMode: "maker",
      });
    });
  };

  return (
    <div className="App">
      <LoadScript
        id="script-loader"
        googleMapsApiKey={API_KEY}
        libraries={["drawing"]}
        language="en"
        region="us"
      >
        <GoogleMap
          mapContainerClassName={containerStyle}
          center={{
            lat: 38.9065495,
            lng: -77.0518192,
          }}
          zoom={10}
          version="weekly"
        >
          <DrawingManager
            drawingMode={state.drawingMode}
            options={{
              drawingControl: true,
              drawingControlOptions: {
                drawingModes: ["polygon"],
              },
              polygonOptions: {
                fillColor: `#2196F3`,
                strokeColor: `#2196F3`,
                fillOpacity: 0.5,
                strokeWeight: 2,
                clickable: true,
                editable: true,
                draggable: true,
                zIndex: 1,
              },
            }}
            onPolygonComplete={(poly) => {
              console.log("onPolygonComplete", poly);
              noDraw();
            }}
          />
        </GoogleMap>
      </LoadScript>
    </div>
  );
}

排查方向 #

• API密钥验证：确认本地是否正确填写API_KEY，且该密钥已启用Maps JavaScript API和Drawing Library，同时检查密钥的访问限制（IP、域名）是否允许本地开发环境访问
• 依赖版本对齐：对比Codesandbox和本地项目的package.json，确保react、react-dom、@react-google-maps/api等核心依赖版本完全一致，避免版本冲突
• 组件属性错误：代码中GoogleMap使用了mapContainerClassName传递样式对象，但正确属性应为mapContainerStyle，这会导致地图容器无法正确渲染宽高，看似地图未加载
• 拼写错误修复：noDraw函数中将marker拼写成maker，设置无效的drawingMode会导致绘制功能异常，应改为drawingMode: null或"marker"
• 浏览器控制台排查：打开本地项目的浏览器控制台，查看Network标签是否有Google Maps脚本加载失败，Console标签是否有报错信息（比如权限错误、组件渲染错误）
• 开发环境配置差异：检查本地webpack/vite等构建工具是否有额外配置（如babel插件、代码压缩、严格模式），这些可能影响组件的正常渲染

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