Vue项目中引入天地图

1. 在Vue的静态资源目录下的中引入天地图的底图天地图API；
2. 在引入了Vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data;

<script type="text/javascript" src="/api?v=4.0&tk=你申请的key"> 
// 引入天地图底层图



export default {
      data () {
          return :{
              
          }
       },
      mounted(){

      var T = ;
      var imageURL = '/img_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你申请的key';
      var lay = new (imageURL, { minZoom: 1, maxZoom: 16 });
      var config = { layers: [lay] };

       = new ('mapDiv', config); // 地图实例
      (new ([0].Longitude, [0].latitude), 3);
      // //允许鼠标双击放大地图
      ();

      //创建地图图层对象
      let mapTypeSelect = [{
        'title': '地图', //地图控件上所要显示的图层名称
        'icon': '/v4.0/image/map/maptype/', //地图控件上所要显示的图层图标（默认图标大小80x80）
        'layer': window.TMAP_NORMAL_MAP //地图类型对象，即MapType。
      },
        {
          'title': '卫星',
          'icon': ' /v4.0/image/map/maptype/',
          'layer': window.TMAP_SATELLITE_MAP
        }, {
          'title': '卫星混合',
          'http': '/v4.0/image/map/maptype/',
          'layer': 'TMAP_HYBRID_MAP'
        }, {
          'title': '地形',
          'icon': ' /v4.0/image/map/maptype/',
          'layer': window.TMAP_TERRAIN_MAP
        },
        {
          'title': '地形混合',
          'icon': ' /v4.0/image/map/maptype/',
          'layer': window.TMAP_TERRAIN_HYBRID_MAP
        }];
      var ctrl = new ({ mapTypes: mapTypeSelect }); // 初始化地图类型选择控件

      (ctrl); //添加地图选择控件

      (window.TMAP_HYBRID_MAP);      // 设置地图位地星混合图层

      
       ()
      },
      methods: {
      GetMaps () {
        let T = ;

        //设置显示地图的中心点和级别
        ();
        (new ([0].Longitude, [0].latitude), 3);

          (index);
          var icon = new ({
            iconUrl: '/img/map/',
            iconSize: new (33, 33),
            iconAnchor: new (10, 25)
          });

          var latlng = new (21,22,); // 设置坐标点传入经度纬度
          let marker = new (latlng, { icon: icon });// 创建标注
          
          const that = this;
          ('click', function (e) { // 监听点击事件
        
            let clientx = ; // 获取marker当前经纬度
            let clientY = ; 
            (new (clientY, clientx), 10); // 重新创建地图对象
            // 这里获取的经度纬度是实际经纬度四舍五入后的获取的
          });

            }
      }

}