react-google-maps/api 无法显示绘制的线条与多边形问题

相同代码在不同项目表现不一致、且依赖版本完全对齐时，基本可以排除API本身的bug，按以下优先级排查即可：

• 第一优先级：全局CSS样式冲突
  这是该问题最高发的诱因。地图底图、标记点能正常显示，仅绘制的多边形/线条不可见、但能正常返回绘制坐标，说明绘制逻辑本身运行正常，只是元素视觉上被隐藏了。
  重点排查项目全局样式（包括CSS重置文件、UI组件库默认样式、tailwind预定义样式）中是否存在以下规则：
  • 对所有path元素设置fill: transparent、stroke: transparent、stroke-width: 0
  • 对所有svg/canvas元素设置opacity: 0、visibility: hidden
  • 地图上层存在z-index更高的透明遮罩层，拦截了视觉展示但未拦截坐标事件
    排查时可直接打开浏览器元素检查器，定位到地图容器内的多边形对应svg/path节点，查看Computed样式面板，逐一禁用可疑样式即可快速定位冲突点。
• 第二优先级：JS API 依赖库未显式声明加载
  你提供的复现代码中，useJsApiLoader配置没有显式声明加载drawing库，部分构建环境下不会自动拉取绘图模块的完整渲染逻辑，会出现事件正常触发但元素不渲染的问题。修改配置补全libraries字段即可：

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "my_Key",
    libraries: ['drawing'] // 强制加载绘图相关依赖
  })
  

• 第三优先级：显式指定绘制元素样式，绕开全局继承
  如果暂时找不到全局样式冲突点，可以直接在DrawingManager配置中强制指定多边形/线条的填充、描边样式，覆盖掉从全局继承的异常样式：

  <DrawingManager
    defaultDrawingMode={window.google.maps.drawing.OverlayType.POLYGON}
    onPolygonComplete={value => getPaths(value)}
    defaultOptions={{
      drawingControl: true,
      drawingControlOptions: {
        position: window.google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          window.google.maps.drawing.OverlayType.POLYGON
        ],
      },
      polygonOptions: { 
        editable: true,
        fillColor: "#1677ff",
        fillOpacity: 0.2,
        strokeColor: "#1677ff",
        strokeOpacity: 1,
        strokeWeight: 2
      }
    }}
  />
  

临时注释掉项目中的全局样式文件、公共布局组件，测试绘制功能是否恢复，如果恢复再逐个引入文件，即可快速定位到引发冲突的具体代码位置。

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