如何通过新的google.maps在vue2-google-map上使用标记的@drag功能？

通过新的google.maps在vue2-google-map上使用标记的@drag功能，可以按照以下步骤进行操作：

步骤1：引入vue2-google-map组件首先，在Vue项目中，需要安装vue2-google-map组件。可以通过npm命令进行安装：

npm install vue2-google-maps

然后，在需要使用google maps的组件中引入vue2-google-map：

import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY', // 在Google Cloud Console中生成的API密钥
    libraries: 'places' // 如果需要使用其他功能，可以在这里添加相应的库
  }
});

步骤2：创建Google Maps地图在需要使用标记的组件中，使用vue2-google-map的<GmapMap>标签来创建地图：

<template>
  <GmapMap :center="center" :zoom="zoom" @click="addMarker"></GmapMap>
</template>
<script>
export default {
  data() {
    return {
      center: { lat: 0, lng: 0 }, // 地图的中心点
      zoom: 10, // 地图的缩放级别
      markers: [] // 存储标记的数组
    };
  },
  methods: {
    addMarker(event) {
      const marker = {
        position: event.latLng,
        draggable: true, // 可以拖动的标记
        // 其他属性...
      };
      this.markers.push(marker); // 将标记添加到数组中
    }
  }
};
</script>

步骤3：显示标记的@drag功能为了在标记上使用@drag功能，需要为标记组件添加@dragstart、@dragend事件监听器。同时，需要为标记添加draggable: true属性来启用拖动功能。具体代码如下：

<template>
  <GmapMap :center="center" :zoom="zoom" @click="addMarker">
    <GmapMarker v-for="(marker, index) in markers" :key="index"
      :position="marker.position"
      :draggable="true"
      @dragstart="onDragStart"
      @dragend="onDragEnd"></GmapMarker>
  </GmapMap>
</template>
<script>
export default {
  // ...
  methods: {
    // ...
    onDragStart(event) {
      // 标记开始拖动时的处理逻辑
      console.log('Marker drag start');
    },
    onDragEnd(event) {
      // 标记结束拖动时的处理逻辑
      console.log('Marker drag end');
    }
  }
};
</script>

通过以上步骤，你可以在Vue项目中使用新的google.maps库，在vue2-google-map上实现标记的@drag功能。请注意，以上代码只是示例，你需要根据自己的实际需求进行适当修改。同时，为了正常使用google.maps功能，你需要在Google Cloud Console中生成一个API密钥，并将其替换为代码中的"YOUR_API_KEY"。