Vue3上 使用腾讯地图 基础展示

一,注册账号 申请key值 

第one步 先注册  腾讯位置服务 - 立足生态，连接未来 (qq.com)

 第two步 注册key!!!!!   并选择开发参考的开发文档

 

        选择类型

 

        添加成功后会在我的应用里看到你的key值

第三步 (因为我这里是在pc端使用 就直接只用Web端文档了) 

二,加载地图

1、 在public文件下的index.html文件添加下面的代码

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key值"></script>

"key=你的key值"这里的key用自己刚才申请的

三,初始化地图
 

//html
<template>
   <div id="container" style="overflow: hidden;"></div>
</template>



<script setup>

import { onMounted, reactive, ref , watch } from 'vue'

var center = ref(null)
// 地图初始化
const initMap = () => {
    //定义地图中心点坐标     
     center.value = new TMap.LatLng(30.589184, 114.29689)
    //定义map变量，调用 TMap.Map() 构造函数创建地图

     map = new TMap.Map(document.getElementById('container'), {
        center: center.value,//设置地图中心点坐标
        zoom: 7,   //设置地图缩放级别
        mapStyleId: 'style1', //设置地图样式
    });
}

 onMounted(()=>{
      initMap()
 })

</script>


<style>
#container {
  /*地图(容器)显示大小*/
  width: 100%;
  height: 100%;
}
</style>

四 ,自定义地图样式

        //个性化地图 样式应用 设置绑定样式

         //查看样式 并在代码中设置

 var map = new window.TMap.Map(document.getElementById('container'), {
          center: center,//设置地图中心点坐标
          zoom: 7.2,   //设置地图缩放级别
          mapStyleId: 'style1', //设置地图样式  
      });

 现在应该能正常展示 后续的撒点 弹框 图标点击等等功能 我再后续更新