腾讯地图异步调用

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

相关推荐
鸡吃丸子9 分钟前
Next.js 入门指南
开发语言·javascript·next.js
wjs202414 分钟前
《Foundation 滑块:界面设计的艺术与科学》
开发语言
游戏开发爱好者835 分钟前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
William_cl44 分钟前
【C# OOP 入门到精通】从基础概念到 MVC 实战(含 SOLID 原则与完整代码)
开发语言·c#·mvc
少许极端2 小时前
算法奇妙屋(七)-字符串操作
java·开发语言·数据结构·算法·字符串操作
懒羊羊不懒@2 小时前
Java基础语法—字面量、变量详解、存储数据原理
java·开发语言
小龙报2 小时前
《算法通关指南---C++编程篇(2)》
c语言·开发语言·数据结构·c++·程序人生·算法·学习方法
古一|2 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
宠友信息2 小时前
java微服务驱动的社区平台:友猫社区的功能模块与实现逻辑
java·开发语言·微服务
驰羽3 小时前
[GO]golang接口入门:从一个简单示例看懂接口的多态与实现
开发语言·后端·golang