Vue3中Google Maps API绘制矩形位置偏移及点击区域异常问题

使用Vue3结合Google Maps API的Drawing Manager组件时，出现两个问题：

• 绘制的矩形向左上方偏移，与鼠标绘制的位置不符
• 矩形的点击触发区域同样偏移，需点击地图上对应偏移位置才能触发点击事件

相关代码 #

JavaScript部分

const loader = new Loader({
    apiKey: 'xxxxx',
    version: 'weekly',
});

const mapid = ref();

loader.load().then(async () => {
    const { Map } = await google.maps.importLibrary('maps');
    const { drawing } = await google.maps.importLibrary('drawing');

    let map = new Map(mapid.value, {
        center: { lat: 47.1611615, lng: 19.5057541 },
        zoom: 8,
        streetViewControl: false,
    });

    const drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl: true,

        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.RECTANGLE,
            ],
        },

        rectangleOptions: { clickable: true, draggable: true, editable: true },
    });

    drawingManager.setMap(map);
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
        google.maps.event.addListener(event.overlay, 'click', function (e) {
            emit('overlayClicked', event.overlay.bounds);
        });

        drawingManager.setDrawingMode(null);
    });
});

Vue模板部分

<template>
    <div
        ref="mapid"
        class="h-96 w-full"
    ></div>
</template>

解决方案 #

以下是常见的修复方向，按优先级尝试：

1. 确保地图在DOM完全渲染后初始化
   Vue中ref绑定的DOM元素在组件mounted钩子前可能未完成渲染，直接初始化地图会导致尺寸计算错误，引发偏移。将地图初始化逻辑移至onMounted钩子中：

import { ref, onMounted } from 'vue';

const loader = new Loader({
    apiKey: 'xxxxx',
    version: '3.54', // 替换为稳定版本，避免weekly分支的潜在bug
});

const mapid = ref();

onMounted(async () => {
    await loader.load();
    const { Map } = await google.maps.importLibrary('maps');
    const { drawing } = await google.maps.importLibrary('drawing');

    const map = new Map(mapid.value, {
        center: { lat: 47.1611615, lng: 19.5057541 },
        zoom: 8,
        streetViewControl: false,
    });

    const drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.RECTANGLE],
        },
        rectangleOptions: { clickable: true, draggable: true, editable: true },
    });

    drawingManager.setMap(map);
    google.maps.event.addListener(drawingManager, 'overlaycomplete', (event) => {
        google.maps.event.addListener(event.overlay, 'click', () => {
            emit('overlayClicked', event.overlay.bounds);
        });
        drawingManager.setDrawingMode(null);
    });
});

2. 检查地图容器的CSS样式

• 移除容器上的transform、perspective等可能干扰坐标计算的CSS属性
• 确保容器没有未预期的padding、margin，或者通过box-sizing: border-box统一尺寸计算
• 给容器添加明确的定位（如position: relative），避免浏览器默认布局导致的偏移

3. 切换Google Maps API版本
   当前使用的weekly版本可能存在未修复的bug，换成稳定版本（如3.54或beta）测试，大部分偏移问题都能通过版本回退解决。

4. 确保页面缩放比例正常
   检查浏览器是否开启了页面缩放（非地图缩放），将页面恢复至100%缩放比例，同时确保页面的viewport设置正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

内容的提问来源于stack exchange，提问作者Tamás László