vue3使用腾讯地图位置展示组件用法

使用 Vue3 调用腾讯地图位置展示组件的步骤如下：

1. 安装 `vue3-qqmap` 库

npm install vue3-qqmap --save

2. 在 Vue3 中注册 `vue3-qqmap` 组件

import Vue from 'vue'
import VueQQMap from 'vue3-qqmap'

Vue.use(VueQQMap, {
  key: 'YOUR_KEY',
  version: '2.exp',
  China: true
})

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

3. 在 Vue3 中使用 `vue3-qqmap` 组件

<template>
  <vue3-qqmap :center="center" :zoom="zoom">
    <vue3-qqmap-marker :position="position" :label="label"></vue3-qqmap-marker>
    <vue3-qqmap-info-window :position="position" :content="content"></vue3-qqmap-info-window>
  </vue3-qqmap>
</template>

<script>
export default {
  data() {
    return {
      center: { lat: 39.916527, lng: 116.397128 },
      zoom: 13,
      position: { lat: 39.916527, lng: 116.397128 },
      label: '腾讯大厦',
      content: '<div style="text-align:center;">腾讯大厦</div>'
    }
  }
}
</script>

在这里，`vue3-qqmap` 标签用于显示地图，`vue3-qqmap-marker` 标签用于添加标记，`vue3-qqmap-info-window` 标签用于添加信息窗口。在标签中，使用 `:` 绑定数据。

以上就是使用 Vue3 调用腾讯地图位置展示组件的基本步骤。