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

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

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