Vue3中使用腾讯地图

在Vue 3中使用腾讯地图，首先需要在项目中安装腾讯地图的JavaScript SDK。

1. 安装腾讯地图JavaScript SDK：

npm install qqmap --save

2. 在Vue组件中引入并初始化腾讯地图：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import * as QQMapWX from 'qqmap'; // 引入腾讯地图SDK
 
export default {
  setup() {
    const map = ref(null);
 
    onMounted(() => {
      QQMapWX.init({
        key: '你的腾讯地图key', // 腾讯地图key
        complete: (res) => {
          map.value = new QQMapWX.Map({
            container: 'map', // 设置容器id
            style: 'map {width: 100%; height: 400px;}', // 地图样式
            zoom: 12, // 设置地图缩放级别
            center: { // 设置地图中心点
              latitude: 39.916527,
              longitude: 116.397128,
            },
          });
        },
      });
    });
 
    return {
      map,
    };
  },
};
</script>

在这个例子中，我们首先在<template>中定义了一个用于展示地图的div，并设置了其样式。在<script>中，我们使用了Vue 3的Composition API，其中setup函数中使用了onMounted生命周期钩子来初始化腾讯地图。我们通过QQMapWX.init方法来进行初始化，并在初始化完成后创建了一个地图实例。

请确保替换你的腾讯地图key为你从腾讯地图平台获取的实际key。