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