腾讯地图异步调用

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

相关推荐
weixin_472339465 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击6 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue7 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762908 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk9 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼10 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客10 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
程序员爱钓鱼10 小时前
【无标题】Go语言中的反射机制 — 元编程技巧与注意事项
开发语言·qt