nuxt-gmaps中GMapMarker设置draggable为true后仍无法拖动的原因

高频根因及对应修复方式 #

• position 内联绑定导致标记被频繁重置
  当前代码中 GMapMarker 的 position 直接写了内联对象字面量，每次父组件重新渲染时都会生成新的坐标对象，标记刚拖动就会被初始坐标覆盖，视觉上表现为完全拖不动。
  修复方案：把坐标抽成独立的响应式变量作为唯一引用，拖动时直接更新该变量值，示例代码：

  <script setup>
  import { ref } from 'vue'
  // 假设 locations 是从接口获取的响应式数组
  const locations = ref([{ lat: 39.9042, lng: 116.4074 }])
  // 单独定义标记位置的响应式引用
  const markerPos = ref({ ...locations.value[0] })
  
  const updateCoordinates = (e) => {
    markerPos.value = {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    }
  }
  </script>
  
  <template>
    <GMap :center="markerPos" :zoom="10">
      <GMapMarker
          :position="markerPos"
          :draggable="true"
          @dragend="updateCoordinates"
      />
    </GMap>
  </template>
  

• 组件版本兼容问题
  若使用的是 nuxt-gmaps v2+ （适配 Nuxt 3 的版本），直接在标签上写 :draggable="true" 可能无法透传到 Google Maps 原生标记实例，需要把拖拽配置放到 options 参数中：

  <GMapMarker
      :position="markerPos"
      :options="{ draggable: true }"
      @dragend="updateCoordinates"
  />
  

• 父级DOM事件拦截
  检查 GMap 组件的父容器是否绑定了 @mousedown.prevent、@pointerdown.prevent 这类阻止默认事件的修饰符，或是给地图容器加了 pointer-events: none 样式，会导致标记的点击拖拽事件被直接拦截。

• Google Maps API 权限缺失
  确认你申请的 Google Maps API Key 已开启「Maps JavaScript API」的完整权限，仅开通静态图权限会出现地图渲染正常但交互能力（拖拽标记、缩放、平移）失效的问题。

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