1、在public下的index.html中引入天地图

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

2、在vue文件中写入

<template><div:id="'mapDiv' + currentIndex"class="map"style="position: absolute; width: 100%; height: 100%; z-index: 101"></div>
</template><script>
export default {props: ["currentIndex"],data() {return {map: null,};},mounted() {this.initMap();},methods: {// 初始化天地图initMap() {// vue项目需要先声明 T = window.T，不然后面无法获取到。let T = window.T;//我当前是存在多个地图所以使用模板动态地图idthis.map = new T.Map(`mapDiv${this.currentIndex}`);// 设置中心点坐标const center = new T.LngLat(113.177, 29.354);this.zoom = 14; // 缩放级别// 传参中心点经纬度，以及放大程度，最小1，最大18this.map.centerAndZoom(center, this.zoom);this.map.setStyle("indigo"); //设置地图主体颜色indigothis.map.enableInertia(); //允许地图拖拽//创建卫星和路网的混合视图// this.map.setMapType(window.TMAP_HYBRID_MAP);//允许鼠标滚轮缩放地图this.map.enableScrollWheelZoom();},},beforeDestroy() {this.map = null;},destroyed() {this.map = null;},
};
</script><style lang="scss" scoped>
::v-deep .tdt-control-container {display: none !important;
}/* ::v-deep .tdt-container{background-color: rgba(15, 30, 80, .9) !important;
} */
</style>

效果图如下：