腾讯地图异步调用

html 复制代码
<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

相关推荐
workflower2 分钟前
活动图描述场景
开发语言·软件工程·需求分析·软件需求·敏捷流程
梦想的初衷~4 分钟前
基于现代R语言【Tidyverse、Tidymodel】的机器学习方法
开发语言·机器学习·r语言
香蕉可乐荷包蛋7 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
惜.己15 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
apihz39 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
coding随想1 小时前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
心情好的小球藻2 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
惜.己2 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json