vue3使用腾讯地图

使用 Vue3 调用腾讯地图的步骤如下：

1. 引入腾讯地图 JavaScript API

<script src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

在这里，`YOUR_KEY` 是你的腾讯地图 API Key。

2. 在 Vue3 中创建地图容器

<template>
  <div ref="map" style="width:100%;height:400px;"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const center = new qq.maps.LatLng(39.916527, 116.397128)
      const map = new qq.maps.Map(this.$refs.map, {
        center,
        zoom: 13
      })
      const marker = new qq.maps.Marker({
        position: center,
        map
      })
      const infoWindow = new qq.maps.InfoWindow({
        map,
        content: '<div style="text-align:center;">腾讯大厦</div>',
        position: center
      })
      infoWindow.open()
    }
  }
}
</script>

在这里，`ref` 用于获取地图容器的引用，`initMap` 方法用于初始化地图和相关组件。

3. 在 Vue3 中引入腾讯地图 JavaScript API

import Vue from 'vue'

Vue.prototype.qq = qq // 引入全局对象 qq

在这里，`qq` 对象是全局对象，可以通过 `this.qq` 来访问。

4. 在 Vue3 中使用 `qq` 对象创建地图容器

<template>
  <div ref="map" style="width:100%;height:400px;"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const center = new this.qq.maps.LatLng(39.916527, 116.397128)
      const map = new this.qq.maps.Map(this.$refs.map, {
        center,
        zoom: 13
      })
      const marker = new this.qq.maps.Marker({
        position: center,
        map
      })
      const infoWindow = new this.qq.maps.InfoWindow({
        map,
        content: '<div style="text-align:center;">腾讯大厦</div>',
        position: center
      })
      infoWindow.open()
    }
  }
}
</script>

在这里，`ref` 用于获取地图容器的引用，`initMap` 方法用于初始化地图和相关组件。使用 `this.qq` 访问腾讯地图对象。

以上就是使用 Vue3 调用腾讯地图的基本步骤。