gmp-advanced-marker无法拖拽且点击事件不触发问题求助

拖拽功能失效的核心修复点 #

你的gmp-advanced-marker拖拽失效，主要需要修正两个关键问题：

1. 等待地图组件完全初始化 #

直接在页面加载时获取标记并绑定事件，大概率地图还没完成初始化，导致拖拽属性没被正确识别。必须监听地图的gmp-map-ready事件，等地图加载完成后再处理标记：

<div class="map-container">
    <gmp-map
        center="39.46598273118431,-0.3835740844457525"
        zoom="12"
        map-id="DEMO_MAP_ID"
    >
        <gmp-advanced-marker
            position="39.46598273118431,-0.3835740844457525"
            title="Resto"
            gmpDraggable="true"
        ></gmp-advanced-marker>
    </gmp-map>
</div>

<script>
    const map = document.querySelector("gmp-map");
    map.addEventListener("gmp-map-ready", () => {
        const marker = document.querySelector("gmp-advanced-marker");
        
        // 绑定拖拽事件，验证拖拽状态
        marker.addEventListener("gmp-dragstart", (evt) => {
            console.log("拖拽开始", evt);
        });
        marker.addEventListener("gmp-dragend", (evt) => {
            console.log("拖拽结束，新坐标：", evt.detail.position);
        });
        
        // 同时重新绑定点击事件
        marker.addEventListener("gmp-click", (evt) => {
            console.log("标记被点击", evt);
        });
    });
</script>

2. 排查容器样式的干扰 #

检查你的.map-container CSS样式，确保没有设置pointer-events: none这类会屏蔽鼠标交互的属性，同时给容器设置明确的宽高（地图需要固定尺寸才能正常渲染交互）：

.map-container {
    width: 100%;
    height: 400px;
    /* 禁止添加pointer-events: none */
}

非触摸设备点击事件补充优化 #

如果非触摸设备上点击事件仍不生效，可以给标记添加自定义内容块，扩大可点击交互区域：

<gmp-advanced-marker
    position="39.46598273118431,-0.3835740844457525"
    title="Resto"
    gmpDraggable="true"
>
    <div style="width:30px;height:30px;background:#ff4444;border-radius:50%;"></div>
</gmp-advanced-marker>

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