vue3使用腾讯地图准备工作 首先要有一个vue3项目，可以先看看官方文档和官方示例 安装或引入腾讯地图JavaScri

准备工作

首先要有一个vue3项目，可以先看看官方文档和官方示例

安装或引入腾讯地图JavaScript SDK：

安装

npm install qqmap --save

在html文件中直接引入script文件（二者选一即可）

    <script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script>

在组件中使用

首先要有一个有宽高的div

<div id="container"></div>

这里作为示例宽高就先给个固定的像素，百分比也是可以的

#container {
  width: 500px;
  height: 500px;
}

引入地图数据

可以在html文件中直接引入

    <script src="https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/arc.js"></script>

也可以异步获取数据，我们这里作为示例直接将其作为js文件引入了

初始化地图方法

const TMap = (window as any).TMap // 主要是为了解决ts校验下面的TMap报错的问题
function initMap() {
  var center = new TMap.LatLng(37.80787, 112.269029);//中心点经纬度
  var data = arcData;//地图数据
  //初始化地图
  var map = new TMap.Map("container", {// 定义map变量，调用TMap.Map构造函数创建地图
    zoom: 5,//设置地图缩放级别
    pitch: 30,// 设置俯仰角
    center: center,//设置地图中心点坐标
    mapStyleId: "style4", //个性化样式
    baseMap: {
      type: "vector",
      features: ["base", "building3d"], // 隐藏矢量文字
    },
  });
  //初始化弧线图并添加至map图层
  new TMap.visualization.Arc({
    mode: 'vertical' // 弧线平面与地平面垂直

  })
    .addTo(map)
    .setData(data);//设置数据
}
onMounted(() => {
  initMap()//加载页面时初始化地图
})

完整代码

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

<script setup lang="ts">
import { arcData } from './data'
import { onMounted } from 'vue';

const TMap = (window as any).TMap
function initMap() {
  var center = new TMap.LatLng(37.80787, 112.269029);
  var data = arcData;
  //初始化地图
  var map = new TMap.Map("container", {
    zoom: 5,//设置地图缩放级别
    pitch: 30,
    center: center,//设置地图中心点坐标
    mapStyleId: "style4", //个性化样式
    baseMap: {
      type: "vector",
      features: ["base", "building3d"], // 隐藏矢量文字
    },
  });
  //初始化弧线图并添加至map图层
  new TMap.visualization.Arc({
    mode: 'vertical' // 弧线平面与地平面垂直

  })
    .addTo(map)
    .setData(data);//设置数据
}
onMounted(() => {
  initMap()
})
</script>

<style scoped>
#container {
  width: 500px;
  height: 500px;
}
</style>