一、申请天地图**，去官网，不做详细阐述，在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: function () {
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>