1、在public-index.html引入天地图cdn

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

key申请地址应用创建成功就能看到key

2、渲染dome

<!--创建dome容器-->
 <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>

  //生命周期 - 在挂载完成（可以访问DOM元素）
 mounted() {
   this.onLoad()
  },
  methods(){
   onLoad(){
    let that=this  //将方法放在mounted，会有指向问题，定义this使用就会正常
    let zoom = 12; //地图的初始化级别，及放大比例
    that.map = new T.Map("mapDiv");
    that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //地图的初始化中心点，此为北京的经纬度
   }
  }

3、添加地图类型控件

 var ctrl = new T.Control.MapType([
        {
          title: "地图", //地图控件上所要显示的图层名称
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
          layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
        },
        {
          title: "卫星混合",
          icon:
            "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: TMAP_HYBRID_MAP
        }
      ]);
       that.map.addControl(ctrl);

我只添加了两种类型的卫星，更多类型可以查看官方文档。

值得注意的是：官方文档提供的代码格式错误，不能直接copy下来用

4、定位用户坐标，绘制城市边界，并通过移动标点重新定位经纬度

<!--添加点击按钮-->
 <button
    style="position: absolute;
    z-index: 500;
    border: 1px solid;
    right: 7%;
    bottom: 10%;
    color: red;
    background: green;
    padding: 10px;"
      @click="positionBtn"
    >定位坐标</button>

  data() {
    //这里存放数据
    return {
        cityName:""  //暂存城市名称
    };
  },
  positionBtn() {
        let that =this
      // this.map.clearOverLays();   //清理地图上的覆盖物
      let lc = new T.LocalCity();  //创建一个获取本地城市位置的实例
      lc.location(function(e) {  //利用ip进行定位
        alert(e.cityName);
        let marker = new T.Marker(e.lnglat);  //e.lnglat，标注点的地理坐标
        that.map.addOverLay(marker);  //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
        that.getMap(); //创建地图对象

        marker.addEventListener("dragend", overlay_style); //添加事件监听函数。
        marker.enableDragging(); //开启标注拖拽功能

        function overlay_style(e) {
          let p = e.target;
          alert(
            "该地区经纬度是：" + p.getLngLat().lng + "," + p.getLngLat().lat
          );
        }
      });
    },
   

    getMap() {
        let that= this
      //创建对象
      let administrative = new T.AdministrativeDivision(); //创建一个获取行政区划的实例
      let config = {
        needSubInfo: false, //是否需要下一级信息
        needAll: false, //是否需要所有子节点。
        needPolygon: true,//是否需要行政区划范围。
        needPre: true,//是否需要上一级所有信息。
        searchType: 1,//查询类型。0表示根据code查询，1表示根据名称查询。
        searchWord: this.cityName//查询行政区划的名称。
      };
      administrative.search(config, searchResult);//方法：根据检索词发起检索，searchResult：回调参数
      function searchResult(result) {
        if (result.getStatus() == 100) {
          let data = result.getData();
          that.showMsg(data);
        } else {
          result.getMsg();
        }
      }
      //具体内容详见AdministrativeDivisionResult类。
    },
    showMsg(data) {
      for (let i = 0; i < data.length; i++) {
        //解释上级行政区划
        if (data[i].parents) {
          let upLevel = "";
          if (data[i].parents.country) {
            upLevel += data[i].parents.country.name;
          }
          if (data[i].parents.province) {
            upLevel += data[i].parents.province.name;
          }
        }

        if (data[i].points) {
          //绘制行政区划
          this.polygon(data[i].points);
        }

        //解释下级行政区划
        if (data[i].child) {
          showMsg(data[i].child);
          console.log(data[i].child.points);
          if (data[i].child.points) {
            //绘制行政区划
            this.polygon(data[i].child.points);
          }
        }
      }
    },

    polygon(points) {
        let that=this
      let pointsArr = [];
      for (let i = 0; i < points.length; i++) {
        let regionLngLats = [];
        let regionArr = points[i].region.split(",");
        for (let m = 0; m < regionArr.length; m++) {
          let lnglatArr = regionArr[m].split(" ");
          let lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
          regionLngLats.push(lnglat);
          pointsArr.push(lnglat);
        }
        //创建面对象,样式
        let polygon = new T.Polygon(regionLngLats, {
          color: "#fd737a",
          weight: 3,
          opacity: 1,
          fillColor: "#FFFFFF", //填充颜色。
          fillOpacity: 0.3 //填充透明度
        });
        //向地图上添加行政区划面
        that.map.addOverLay(polygon);
      }
      //显示最佳比例尺
      that.map.setViewport(pointsArr);
      alert(
        "当前地图中心点：" +
          that.map.getCenter().getLng() +
          "," +
          that.map.getCenter().getLat()
      );
    },

5、添加多个点，并且点击弹出信息框

<!--添加点击按钮-->
  <button
      style="position: absolute;
    z-index: 500;
    border: 1px solid;
    right: 7%;
    bottom: 5%;
    color: red;
    background: green;
    padding: 10px;"
      @click="pointsBtn"
    >添加多个点</button>

pointsBtn() {
        let that=this
      let data_info = [
        [
          116.417854,
          39.921988,
          "地址：北京市东城区王府井大街88号乐天银泰百货八层"
        ],
        [116.406605, 39.921585, "地址：北京市东城区东华门大街"],
        [116.412222, 39.912345, "地址：北京市东城区正义路甲5号"]
      ];

      for (let i = 0; i < data_info.length; i++) {
        let marker = new T.Marker(
          new T.LngLat(data_info[i][0], data_info[i][1])
        ); // 创建标注
        let content = data_info[i][2];
        that.map.addOverLay(marker); // 将标注添加到地图中
        that.addClickHandler(content, marker);
      }
     
   
    },
 addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
          that.openInfo(content, e);
        });
      },
 openInfo(content, e) {
        let point = e.lnglat;
        that.marker = new T.Marker(point); // 创建标注
        let markerInfoWin = new T.InfoWindow(content, {
          offset: new T.Point(0, -30)
        }); // 创建信息窗口对象
        that.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
      },

使用自定义信息框，会涉及到利用三目运算符，根据数字转换成对应字符的问题，记得用()把三木运算符括起来，否则会导致前面的html无法渲染

结语

网上写天地图的文章挺少，其实只要把坑踩过了还是挺好用的。觉得有用的小伙伴，可以请我喝杯奶茶以资鼓励。