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

首先获取key

​​申请key​​ 这个里面应用类型记得选择用浏览器端

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

第一步，在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>