vue项目中使用天地图

关于天地图

当使用 Vue.js 开发 Web 应用程序时，使用地图服务是一种常见的需求，在 Vue.js 中使用天地图可以展示地理空间数据、实现地图交互和定位等功能。

申请天地图api key（创建一个应用）

引入天地图

在项目中public文件夹下index.html中引入

<script src="http://api.tianditu.gov.cn/api?v=3.0&tk=您的密钥" type="text/javascript"></script>

创建map

<div id="map"></div>

初始化地图

mounted() {
    this.load()
  },

methods:{
    load() {
  const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log('地图初始化成功')
          resolve(window.T)
          reject('error')
        }
      })
      init.then(T => {
        this.map = new T.Map('map')
        this.map.maxZoom = 20
        this.map.centerAndZoom(
          new T.LngLat(this.centerData[0], this.centerData[1]),
          16
        )
        //创建地图图层对象
        let mapTypeSelect = [
          {
            title: '地图', //地图控件上所要显示的图层名称
            icon:
              'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: window.TMAP_NORMAL_MAP //地图类型对象，即MapType。
          },
          {
            title: '卫星',
            icon:
              ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_SATELLITE_MAP
          },
          {
            title: '卫星混合',
            http: 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
            layer: 'TMAP_HYBRID_MAP'
          },
          {
            title: '地形',
            icon:
              ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
            layer: window.TMAP_TERRAIN_MAP
          },
          {
            title: '地形混合',
            icon:
              ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
            layer: window.TMAP_TERRAIN_HYBRID_MAP
          }
        ]
        var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }) // 初始化地图类型选择控件
        // this.map.addControl(ctrl); //添加地图选择控件
        this.map.setMapType(window.TMAP_SATELLITE_MAP) // 设置地图位地星混合图层
        this.GetMaps()
      })
}
}

写上css样式

<style scoped>
#map {
  width: calc(100vw - 26vw);
  height: 80vh;
  position: absolute;
  left: 26vw;
  top: 20vh;
  z-index: 0;
}

::v-deep .tdt-infowindow-content {
  margin: 6px 9px !important;
  padding: 0 4px !important;
  text-align: center !important;
}

::v-deep .tdt-infowindow-tip-container {
  margin: -2px auto !important;
}

::v-deep .tdt-container a.tdt-infowindow-close-button {
  padding: 0 0 0 4px !important;
}

::v-deep .tdt-label {
  line-height: 24px !important;
  padding: 0 5px !important;
  border-radius: 2px;
}

::v-deep .tdt-infowindow-content-wrapper,
.tdt-infowindow-tip {
  border-radius: 8px;
}
</style>

最后成果