vue集成天地图

最新推荐文章于 2024-05-23 16:25:43 发布

趴着喝可乐

最新推荐文章于 2024-05-23 16:25:43 发布

阅读量4.2k

点赞数 5

分类专栏： # Vue 文章标签： vue 天地图

本文链接：https://blog.csdn.net/u011424614/article/details/108260538

版权

Vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

vue集成天地图
一、前言
二、正文
三、其它
- 1.隐藏天地图LOGO

vue集成天地图

一、前言

开发环境

Vue.js：2.9.6
天地图 JavaScript API：4.0

参考：

Vue.js官网：https://cn.vuejs.org/
天地图官网：https://www.tianditu.gov.cn/
天地图入门指导（js）：http://lbs.tianditu.gov.cn/api/js4.0/guide.html
天地图代码示例（js）：http://lbs.tianditu.gov.cn/api/js4.0/examples.html
vue集成cesium：https://blog.csdn.net/u011424614/article/details/103403275
vue入门和使用实践：https://blog.csdn.net/u011424614/article/details/94478809

二、正文

index.html 中引入天地图在线 API

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-tdt-demo</title>
    <!-- 引入天地图在线 API -->
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

components 文件夹中新建 TdtMap.vue 组件

mounted() 中初始化天地图

<template>
  <div :id="tdtMapDivID" class="divTdtMap"></div>
</template>

<script>
  export default {
    name: 'TdtMap',
    data() {
      return {
        tdtMapDivID: "tdtMapDivID_"+this._uid,
        tdtMap: {}
      }
    },
    created() {
    },
    mounted(){
      // 初始化天地图
      this.initTdtMap()
    },
    watch: {
    },
    methods: {
      // 初始化天地图
      initTdtMap(){
        this.tdtMap = new T.Map(this.tdtMapDivID)
        this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
      },
    }
  }
</script>

<style scoped>
  .divTdtMap {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 80vh;
    z-index: 0;
  }
</style>

测试组件，新建 test.vue

导入 组件、注册 组件和 使用 组件

<template>
  <!-- 使用组件 -->
  <TdtMap></TdtMap>
</template>

<script>
  /* 导入组件 */
  import TdtMap from './components/TdtMap'
  
  export default {
    name: 'TdtMap',
    components: {
      /* 注册组件 */
      TdtMap,
    },
    data() {
      return {
      }
    },
    created() {
    },
    mounted(){
    },
    watch: {
    },
    methods: {
    },
  }
</script>

<style scoped>

</style>

三、其它

1.隐藏天地图LOGO

设置隐藏样式

 document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none'

趴着喝可乐

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
4
评论
vue集成天地图

文章目录Vue集成天地图一、前言二、正文Vue集成天地图一、前言开发环境Vue.js：2.9.6天地图 JavaScript API：4.0参考：Vue.js官网：https://cn.vuejs.org/天地图官网：https://www.tianditu.gov.cn/天地图入门指导：http://lbs.tianditu.gov.cn/api/js4.0/guide.htmlvue集成cesium：https://blog.csdn.net/u011424614
复制链接

扫一扫