当前位置:首页 » 《关于电脑》 » 正文

vue项目中使用天地图

6 人参与  2024年11月02日 18:01  分类 : 《关于电脑》  评论

点击全文阅读


关于天地图

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

最后成果


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/181632.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 状元水饺的秘密一口气看完_林姐祖宗冷笑章节目录_小说后续在线阅读_无删减免费完结_
  • 沐风华,沐依岚,沐天烨柔弱医修今天也在背地里暴打魔尊后续(柔弱医修今天也在背地里暴打魔尊)全文在线下载在线+纯净版结局
  • 偏我去时春满城阮清影周时夜小说无删减阅读清爽版(阮清影周时夜)外篇+续集
  • 我给诈骗分子转账后,请全班点天灯的高富帅班长慌了推文_陈语女友姜琛新书_小说后续在线阅读_无删减免费完结_
  • 沈无虞裴青砚浮生若梦昙花一现彩蛋小说结尾+附加(浮生若梦昙花一现)清爽版阅读
  • 阮清影周时夜完结篇全篇阅读无广告(偏我去时春满城)番外+续集
  • (恶雌一心离婚,兽夫们疯狂团宠她)恶雌一心离婚,兽夫们疯狂团宠她小说(姜兮,陆流枫)整书在线无广告高口碑小说
  • 改嫁天煞孤星大将军后,跟我一起重生的夫君悔疯了后续_谢景尧沈清妍小姐故事会_小说后续在线阅读_无删减免费完结_
  • 苏玉柔小说全篇完整在线阅读(疯批霸总?她玉软花柔才没训我!)热门章节列表
  • 重回高温末世,笑看男友的小青梅用唯一的水源洗澡洗头结局_张峻豪田思涵青梅全集_小说后续在线阅读_无删减免费完结_
  • 沈易烟小说(重生嫡女:爱妃马甲又掉啦)章节目录+起点章节(沈易烟)全篇清爽版在线
  • 热文推荐沈棠眠宋闻璟折寒枝簪起霜思小说大结局(折寒枝簪起霜思)书荒必看列表

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1