前言： 接到公司得通知，需要将Vue项目中使用的高德地图(至于高德地图的使用，可能会也写一篇记录博客，也许不会)替换成天地图，之前没有接触过天地图；所以只能请教我的人生导师------度娘了，但是查阅了挺多的记录博客，发现他们记载的都并不详细，有些甚至写了一大堆无关紧要的东西(拜托，首页任务就是要先把地图展示出来再说，其它的功能可以慢慢添加上去，你直接贴一大堆代码上去，甚至部分代码都没有贴上去，别人怎么能看懂)；所以我还是自己记录一下把，免得到时候忘了看自己写的可能比较好一点(虽然其它人也可能看不懂我的，哈哈)

获取天地图key

https://console.tianditu.gov.cn/api/key
创建新应用 ===> 填写信息(注意应用类型选择服务器端) ===> 得到key

index.html 中引入

注册天地图

地图的最基本使用实例文件

<template>
  <div :id="tdtMapDivID" class="divTdtMap"></div>
</template>

<script>
  export default {
   
    name: 'TdtMap',
    data() {
   
      return {
   
        tdtMapDivID: "tdtMapDivID_"+this._uid,
        tdtMap: {
   }
      }
    },
    created() {
   
    },
    mounted(){
   
      // 初始化天地图
      this.initTdtMap()
    },
    watch: {
   
    },
    methods: {
   
      // 初始化天地图
      initTdtMap(){
   
        this.tdtMap = new T.Map(this.tdtMapDivID)
        this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
      },
    }
  }
</script>

<style scoped>
  .divTdtMap {
   
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 80vh;
    z-index: 0;
  }
</style>

这样就可以了，不过仅仅是地图的展示，其它的坐标标志、信息窗体等功能就可以结合天地图官方实例去实现了