vue集成天地图

文章目录

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

vue集成天地图

一、前言

  • 开发环境
  1. Vue.js:2.9.6
  2. 天地图 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

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-tdt-demotitle>
    
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript">script>
  head>
  <body>
    <div id="app">div>
    
  body>
html>
  • components 文件夹中新建 TdtMap.vue 组件

mounted() 中初始化天地图






  • 测试组件,新建 test.vue

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






三、其它

1.隐藏天地图LOGO

  • 设置隐藏样式
 document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none'

你可能感兴趣的:(#,Vue,vue,天地图)