使用腾讯地图glAPI + vue3开发一个可拖拽的marker

首先，在Vue3中安装腾讯地图的glAPI：

npm install tmapgl --save

然后，在Vue3组件中引入并使用该glAPI：

<template>
  <div id="map"></div>
</template>

<script>
  import { ref, onMounted } from 'vue'
  import TMap from 'tmapgl'

  export default {
    setup() {
      const map = ref(null)
      const marker = ref(null)

      onMounted(() => {
        const center = new TMap.LatLng(39.908864, 116.397390)
        map.value = new TMap.Map('map', {
          center,
          zoom: 15,
          pitch: 60,
          bearing: -60,
          mapStyleId: 'style1'
        })

        marker.value = new TMap.Marker({
          position: center,
          draggable: true,
          map: map.value
        })

        marker.value.on('dragend', () => {
          console.log(marker.value.getLngLat())
        })
      })

      return {
        map,
        marker
      }
    }
  }
</script>

<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

在上面的代码中，我们首先在Vue3组件中创建了一个div元素，并将其id设置为“map”。然后，在setup()函数中，我们使用ref()函数创建了map和marker两个响应式变量，并在onMounted()钩子函数中初始化了地图和标记。注意，我们将标记的draggable属性设置为true，以便它可以被拖动。我们还注册了标记的dragend事件，以便在标记停止拖动时打印其经纬度坐标。

最后，我们将map和marker变量返回到模板中，以便我们可以在模板中使用它们。我们还添加了一些CSS样式来设置地图的高度和宽度。

现在，我们已经成功地使用腾讯地图的glAPI和Vue3创建了一个可拖拽的标记。