天地图(二)引入地图

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;
      //我当前是存在多个地图所以使用模板动态地图id
      this.map = new T.Map(`mapDiv${this.currentIndex}`);
      // 设置中心点坐标
      const center = new T.LngLat(113.177, 29.354);
      this.zoom = 14; // 缩放级别
      // 传参中心点经纬度，以及放大程度，最小1，最大18
      this.map.centerAndZoom(center, this.zoom);
      this.map.setStyle("indigo"); //设置地图主体颜色indigo
      this.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>

效果图如下：