vue-cli3项目中使用天地图

一、申请天地图密钥，去官网，不做详细阐述，在public-index.html引入script

 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的密钥"></script>

 

二、建一个js文件，写入以下内容

三、在你需要引入天地图的vue页面

<template>

<div id="yzMap"></div>

</template>

<script>

import MapInit from '../assets/js/MapInit.js'

export default {

  name: 'tianditu',

  data () {

    return{

      

    }

  },

  mounted() {

    this.roadMap()

  },

  methods: {

    roadMap() {

      MapInit.init().then(

        T => {

          this.T = T

          const imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=c80f66ab87655c8b1aea2ca05119f852'

          const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })

          const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' }

          this.map = new T.Map('yzMap', config)

          const ctrl = new T.Control.MapType()

          this.map.addControl(ctrl)

          this.map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12)

        }).catch()

    }



  }

}

</script>

<style scoped>

 #yzMap {

  width: 100vw;

  height: 100%;

  position: absolute;

}



</style>