Google Maps JS API可拖拽Advanced Marker在触控设备无法触发点击事件

问题核心是：触控设备中，开启拖拽的Advanced Marker会优先捕获触摸事件用于处理拖拽逻辑，导致gmp-click/click事件被拦截。以下是两种可行的解决方式：

方法1：通过gmp-mouseup结合位移判断区分点击与拖拽 #

监听标记的gmp-mousedown记录初始触摸位置，在gmp-mouseup时计算位移，当位移小于设定阈值时判定为点击行为，执行原逻辑：

for (let i = 0; i < markerPositions.length; i++) {
    const marker = new AdvancedMarkerElement({
        map: map,
        position: markerPositions[i].position,
        gmpDraggable: markerPositions[i].draggable
    });

    let startPosition = null;

    // 记录触摸/鼠标按下的初始坐标
    marker.addEventListener("gmp-mousedown", (e) => {
        startPosition = { x: e.clientX, y: e.clientY };
    });

    marker.addEventListener("gmp-mouseup", (e) => {
        if (!startPosition) return;
        
        // 设定5px位移阈值，可根据需求调整
        const deltaX = Math.abs(e.clientX - startPosition.x);
        const deltaY = Math.abs(e.clientY - startPosition.y);

        if (deltaX < 5 && deltaY < 5) {
            // 执行原点击逻辑
            const infowindow = new google.maps.InfoWindow({
                content: "This marker has been clicked",
            });
            infowindow.open({
                anchor: marker,
                map: map,      
            });
            map.panTo(marker.position);
        }
        startPosition = null;
    });

    markers.push(marker);
}

方法2：用双击事件替代（适合允许双击触发的场景） #

gmp-dblclick事件不会被拖拽逻辑拦截，若业务允许，可直接绑定该事件实现需求：

marker.addEventListener("gmp-dblclick", () => {
    const infowindow = new google.maps.InfoWindow({
        content: "This marker has been double-clicked",
    });
    infowindow.open({
        anchor: marker,
        map: map,      
    });
    map.panTo(marker.position);
});

额外注意事项 #

• 原代码存在两处语法错误：new Map(document.getElementById("map");缺少闭合括号；gmpDraggable属性行末尾误用分号（应改为逗号），需修正后代码才能正常运行。
• 方法1中的位移阈值可根据实际场景调整，太小易误判拖拽为点击，太大则会忽略轻微位移的有效点击。

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