VueJS中如何引用v-for循环创建的gmap-marker对象？

嘿，这个需求我之前做Google Maps相关开发时也碰到过，其实用ref结合回调函数就能轻松实现你想要的按ID存储Marker实例的效果！

步骤1：给每个Marker数据添加唯一ID #

首先确保你的markers数组里每个元素都有一个唯一的id字段（别用index当ID，数组元素顺序变化时index会跟着变，稳定性太差）：

data() {
  return {
    markers: [
      { id: 1, position: { lat: 39.9042, lng: 116.4074 }, icon: 'your-icon-url' },
      { id: 2, position: { lat: 31.2304, lng: 121.4737 }, icon: 'your-icon-url' },
      // 更多Marker数据...
    ],
    markerRefs: {} // 用来存储Marker实例的对象，键是Marker的id
  }
}

步骤2：用ref回调函数存储Marker实例 #

在gmap-marker组件上使用ref的回调函数，把每个Marker的实例挂载到markerRefs对象里，键对应Marker的id：

<gmap-marker 
  :key="m.id" 
  v-for="m in markers" 
  :icon="m.icon" 
  :position="m.position" 
  :clickable="true" 
  :draggable="true" 
  @click="center = m.position"
  :ref="el => {
    // 组件挂载时存入实例，卸载时删除对应键避免内存泄漏
    if (el) {
      this.markerRefs[m.id] = el
    } else {
      delete this.markerRefs[m.id]
    }
  }"
></gmap-marker>

步骤3：通过ID访问Marker实例 #

之后你想要操作某个特定的Marker时，直接通过this.markerRefs[目标ID]就能拿到对应的Marker组件实例，比如调用它的方法或者修改属性：

// 示例：获取id为1的Marker并操作
const targetMarker = this.markerRefs[1]
if (targetMarker) {
  // 比如调用Marker的API方法，设置新位置
  targetMarker.setPosition({ lat: 30.2672, lng: 120.1551 })
}

这样就完美实现了你想要的“以ID为键存储Marker对象”的需求，后续操作起来非常顺手！

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