Vue project uses the sky map method (Vue introduces sky map, create map instance

Recently, the project needs to use the sky map, and it needs to be introduced into the Vue project. Since the official website does not have relevant documentation, here I will record the introduction method I used. It may not be very good. I hope there is a better way to teach Click me.

First get the key to
apply for the key
application type in this application type remember to choose the browser side

The first step is to add the Sky Map API JS file to the index.html entry file under the Vue project folder public.

Introduce Tiantu JavaScript API file

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

2. Create a VUE file and install the first page

<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>