腾讯地图异步调用

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

相关推荐
神所夸赞的夏天1 小时前
c#获取Datatable中某列最大或最小的行数据方法
开发语言·c#
h0l10w1 小时前
【Java】MongoDB
java·开发语言·mongodb
Tim_101 小时前
【算法专题训练】02、二进制
java·开发语言·算法
EndingCoder1 小时前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13131 小时前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
咕噜签名分发冰淇淋2 小时前
申请注册苹果iOS企业级开发者证书需要公司拥有什么规模条件
macos·ios·cocoa
我是唐青枫2 小时前
C#.NET serilog 详解
开发语言·c#·.net
oioihoii2 小时前
C++11中的std::minmax与std::minmax_element:原理解析与实战
java·开发语言·c++
超龄超能程序猿2 小时前
使用 Python 对本地图片进行图像分类
开发语言·人工智能·python·机器学习·分类·数据挖掘·scipy
wkj0012 小时前
php中调用对象的方法可以使用array($object, ‘methodName‘)?
android·开发语言·php