vue項目中使用天地圖的簡單代碼示例

更新時間：2024年11月20日 09:34:44 作者：qq_48393685

這篇文章主要給大家介紹了關于vue項目中使用天地圖的相關資料,在Vue.js項目中使用天地圖,首先需要申請apikey并在index.html中引入天地圖的js文件,然后創(chuàng)建一個div元素作為地圖容器,并通過CSS設置其樣式,需要的朋友可以參考下

關于天地圖

當使用 Vue.js 開發(fā) Web 應用程序時，使用地圖服務是一種常見的需求，在 Vue.js 中使用天地圖可以展示地理空間數(shù)據(jù)、實現(xiàn)地圖交互和定位等功能。

申請?zhí)斓貓Dapi key（創(chuàng)建一個應用）

引入天地圖

在項目中public文件夾下index.html中引入

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

創(chuàng)建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
        )
        //創(chuàng)建地圖圖層對象
        let mapTypeSelect = [
          {
            title: '地圖', //地圖控件上所要顯示的圖層名稱
            icon:
              'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地圖控件上所要顯示的圖層圖標（默認圖標大小80x80）
            layer: window.TMAP_NORMAL_MAP //地圖類型對象，即MapType。
          },
          {
            title: '衛(wèi)星',
            icon:
              ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_SATELLITE_MAP
          },
          {
            title: '衛(wèi)星混合',
            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>