我要评论关于天地图
当使用 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>最后成果
总结
到此这篇关于vue项目中使用天地图的文章就介绍到这了,更多相关vue项目使用天地图内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论