Vue 天地图的引入

效果

1. 去官网国家地理信息公共服务平台 天地图 注册登陆成为开发者

2.申请key天地图API

 

 

 

3.得到key  在public/index.js 引入

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script>

4.在要使用地图的页面引入

<template>
  <div>
    <div class="mapDiv" ref="map"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     zoom: '11',
      T: window.T,
      map: '',
    }
  },
    mounted() {    
    this.getPosition();
  },
 


  methods: {
    getPosition() {   //地图初始化
      this.map = new this.T.Map(this.$refs.map)// 初始化地图对象
      this.map.setMapType(window.TMAP_SATELLITE_MAP);
      this.map.centerAndZoom(new this.T.LngLat(117.22927094,31.60607975), this.zoom)// 设置显示地图的中心点和级别
      this.map.enableDrag();
    },

}

</script>

<style >

.mapDiv{
  width: 100%;
  height: 85vh;
}
</style>