vue3项目中使用天地图并加入标注

浏览了很多其他的博客，发现每个人都是从webpack.base.conf.js配置，然后出现T不存在的报错，我都不知道怎么运次出来的 唉！！

**

一、在index.html文件中引入cdn资源：

**
在头部引入

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请到的KEY值"></script>

二、建立一个js文件，如 map.js

export default {
    methods: {
      addCtrl() {
        let T = window.T
        var ctrl = new T.Control.MapType([{
            title: '地图', // 地图控件上所要显示的图层名称
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: window.TMAP_NORMAL_MAP // 地图类型对象，即MapType。
          },
          {
            title: '卫星',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
            layer: window.TMAP_HYBRID_MAP
          }
        ])
        this.map.addControl(ctrl)
      },
      markerPoint(site) {
        let T = window.T
        site.forEach(item => {
          //创建标注对象
          let marker = new T.Marker(new T.LngLat(item.lng, item.lat))
          //向地图上添加标注
          this.map.addOverLay(marker)
        })
      },
    }
  }

三、在vue页面中使用

<template>
  <div>
    <!--创建容器-->
    <div id='mapDiv' style='position:absolute;width:100%;height:100%;'></div>
  </div>
</template>
<script>
import map from '@/assets/js/map' // 引入刚才的map.js 注意路径
export default {
  mixins: [map],
  data() {
    return {
      map: '', // 对象
      zoom: 12, // 地图的初始化级别，及放大比例
      centerLatitude:'39.65053092',//中心纬度
      centerLongitude:'118.1834506',//中心经度
    }
  },
  mounted() {
    // 挂载完成后渲染地图
    this.$nextTick(function() {
      this.onLoad()
    })
  },
  methods: {
    onLoad() {
      let T = window.T
      this.map = new T.Map('mapDiv')
      this.map.centerAndZoom(new T.LngLat(this.centerLongitude, this.centerLatitude), this.zoom) // 设置显示地图的中心点和级别
      // 添加地图类型控件
      this.addCtrl()
 
      // 普通标注
      let site = [
        { lng: 116.30034, lat: 39.98054 },
        { lng: 116.41238, lat: 40.07689 },
        { lng: 116.34143, lat: 40.03403 },
      ]
      this.markerPoint(site)
    },
  },

}
</script>