vue中引入天地图

参考链接：https://blog.csdn.net/Wuyo_7/article/details/107253632

首先在public文件夹的index.html中引入天地图的api文件

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

在vue中创建一个js文件

我的创建路径为：

 

 MapInit.js的内容

// 初始化地图
export default {
    init() {
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if (window.T) {
          console.log('地图脚本初始化成功...')
          resolve(window.T)
          reject('error')
        }
      })
    }
  }
  

 

之后在需要引入天地图的界面中引入该方法

import MapInit from '../../components/show/MapInit.js';

之后便可以使用天地图了

官网上天地图的样例有好多，可以自己在天地图的官网进行查询

天地图样例链接：http://lbs.tianditu.gov.cn/api/js4.0/examples.html