当前位置: 首页 > news >正文

腾讯地图异步调用

<template><!-- 定义地图显示容器 --><div id="container"></div>
</template><script setup>import { onMounted } from 'vue';const mapKeys = import.meta.env.VITE_GLOB_TX_MAP_KEYS;function initMap() {// //定义地图中心点坐标var center = new TMap.LatLng(39.98412, 116.307484);//定义map变量,调用 TMap.Map() 构造函数创建地图var map = new TMap.Map(document.getElementById('container'), {center: center, //设置地图中心点坐标zoom: 17.2, //设置地图缩放级别// pitch: 43.5, //设置俯仰角rotation: 45, //设置地图旋转角度});}function loadScript(callback) {//创建script标签,并设置src属性添加到body中var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=' + mapKeys;document.body.appendChild(script);script.onload = callback;}onMounted(() => {loadScript(() => {initMap();});});
</script><style scoped>#container {/*地图(容器)显示大小*/width: 1200px;height: 400px;}
</style>

 const mapKeys = import.meta.env.VITE_GLOB_TX_MAP_KEYS;   // 申请的 key

http://www.lryc.cn/news/389213.html

相关文章:

  • 通过docker overlay2 目录名查找占用磁盘空间最大的容器名和容器ID
  • 每周算法:有向图强连通分量
  • Python习题 053:在逻辑值检测时会被认为是真值的是?
  • 基于RackNerd + CentOS 7 64 Bit + aaPanel 的那些事
  • 大数据期末复习——hadoop、hive等基础知识
  • 什么是客户体验自动化?
  • 高效除氟:探索CH-87up树脂在氟化工废水处理中的应用
  • 【Git】LFS
  • 隐式转换的魔法:Scala中隐式转换的深度解析
  • 外贸企业选择什么网络?
  • Redis 7.x 系列【14】数据类型之流(Stream)
  • (四)opengl函数加载和错误处理
  • RuoYi-Vue3不启动后端服务如何登陆?
  • Typora(跨平台 Markdown 编辑器 )正版值得购买吗
  • springboot个人证书管理系统-计算机毕业设计源码16679
  • 读-改-写操作
  • 海外仓系统应用教程:解决了小型海外仓哪些问题
  • shell 脚本编程
  • gin参数验证
  • 【web3】分享一个web入门学习平台-HackQuest
  • Sectigo或RapidSSL DV通配符SSL证书哪个性价比更高?
  • 金蝶云星空字段之间连续触发值更新
  • Python 获取字典中的值(八种方法)
  • Day49
  • OpenCV 车牌检测
  • 机器学习/pytorch笔记:time2vec
  • 降低开关电源噪声的设计总结
  • rust嵌入式开发2024
  • 字符串
  • mysql8 锁表与解锁