Google Maps自定义Overlay无法覆盖全地图，Canvas定位异常求助

我在使用Google Maps CustomOverlay时，定义了如下onAdd函数：

onAdd = () => {
    if (this.overlay && this.canvasRef.current) {
        const canvas = this.canvasRef.current;
        const mapDiv = this.props.map.getDiv(); // 获取地图容器元素

        canvas.style.position = "absolute"; // 确保绝对定位
        canvas.width = mapDiv.offsetWidth; // 动态设置宽度
        canvas.height = mapDiv.offsetHeight; // 动态设置高度
        canvas.style.pointerEvents = "none"; // 禁止与Canvas交互
        this.overlay?.getPanes()?.overlayLayer.appendChild(canvas);

        // 监听地图 resize 事件，更新Canvas尺寸
        google.maps.event.addListener(this.props.map, "resize", () => {
        canvas.width = mapDiv.offsetWidth;
        canvas.height = mapDiv.offsetHeight;
        this.overlay?.draw(); // 调整尺寸后重绘
        });
    }
};

遇到的问题：Canvas渲染时左上角位于地图中间。查看Google Maps生成的DOM，发现Canvas的父元素样式如下：

z-index: 1;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
will-change: transform;
transform: translate(0px, 0px);

注：我使用的是React类组件：class CustomOverlay extends Component<CustomOverlayProps> {}

编辑1：
展示问题的动图：

我已创建可复现该问题的沙箱环境。

编辑2：
我很疑惑为何有人以“需要调试细节”为由投票关闭问题，我已经提供了沙箱环境...

解决方案 #

问题根源在于overlayLayer父容器默认的left:50%和top:50%定位，导致Canvas左上角对齐到父容器中心。给Canvas添加反向偏移即可修正：

修改onAdd函数，为Canvas添加以下样式：

canvas.style.left = "-50%";
canvas.style.top = "-50%";

完整修改后的onAdd函数：

onAdd = () => {
    if (this.overlay && this.canvasRef.current) {
        const canvas = this.canvasRef.current;
        const mapDiv = this.props.map.getDiv(); // 获取地图容器元素

        canvas.style.position = "absolute"; // 确保绝对定位
        canvas.width = mapDiv.offsetWidth; // 动态设置宽度
        canvas.height = mapDiv.offsetHeight; // 动态设置高度
        canvas.style.pointerEvents = "none"; // 禁止与Canvas交互
        // 添加反向偏移抵消父容器的50%定位
        canvas.style.left = "-50%";
        canvas.style.top = "-50%";
        this.overlay?.getPanes()?.overlayLayer.appendChild(canvas);

        // 监听地图 resize 事件，更新Canvas尺寸
        google.maps.event.addListener(this.props.map, "resize", () => {
        canvas.width = mapDiv.offsetWidth;
        canvas.height = mapDiv.offsetHeight;
        this.overlay?.draw(); // 调整尺寸后重绘
        });
    }
};

通过负偏移抵消父容器的居中定位，让Canvas左上角对齐地图容器左上角，即可正常覆盖整个地图区域。

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