Vue项目使用天地图的方法（Vue引入天地图，创建地图实例

最新推荐文章于 2025-03-05 14:04:59 发布

时间不会赖着不走

最新推荐文章于 2025-03-05 14:04:59 发布

阅读量2.3k

点赞数 2

分类专栏： VUE

本文链接：https://blog.csdn.net/he1234555/article/details/115288579

版权

VUE 专栏收录该内容

52 篇文章

订阅专栏

本文记录了如何在Vue项目中引入并使用天地图的过程，包括在index.html中添加API引用，创建Vue组件，以及初始化地图并设置中心点。作者通过示例代码展示了两种不同的地图显示方式，并分享了遇到的问题和解决思路，期待社区提供更好的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。

首先获取key
申请key
这个里面应用类型记得选择用浏览器端
在这里插入图片描述

第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。

引入天地图JavaScript API文件

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

2.创建VUE文件，实装第一个页面

<template>
  <div>
    <header>天地图</header>
    <div id="yzMap" style="position: absolute; width: 85%; height: 80%"></div>
  </div>
</template>
<script>
export default {
  name: 'tianditu',
  data() {
    return {
    };
  },
  mounted: () => {
    const a = new Promise((resolve, reject) => {
      console.log(reject);
      // 如果已加载直接返回
      if (window.T) {
        console.log('地图脚本初始化成功...');
        resolve(window.T);
      }
    });
    // 第一种方式显示
    // a.then((T) => {
    //   const imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=5228a6fb6f451e191672532de0a03ad6';
    //   const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
    //   const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
    //   const map = new T.Map('yzMap', config);
    //   const ctrl = new T.Control.MapType();
    //   map.addControl(ctrl);
    //   const map = new T.Map('yzMap');
    //   map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);
    // }).catch();
    // 第二种方式显示
    const map = new window.T.Map('yzMap');
    map.centerAndZoom(new window.T.LngLat(116.401003, 39.903117), 12);
    console.log(a);
  },
  methods: {
  },
};
 
</script>
<style scoped>
</style>