vue项目中使用天地图的简单代码示例

这篇文章主要给大家介绍了关于vue项目中使用天地图的相关资料,在Vue.js项目中使用天地图,首先需要申请apikey并在index.html中引入天地图的js文件,然后创建一个div元素作为地图容器,并通过CSS设置其样式,需要的朋友可以参考下

关于天地图

当使用 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>