基於Vue的天地圖入門專題(一)

寫在前面

工作之余想寫點博客，畢竟還沒畢業就參加工作，至此已經一年多了。經手的一個項目，主要承擔的前端開發，其中由很多模塊都是我自己獨立開發的，這次就想把天地圖這個模塊拿出來記錄總結一下。天地圖這塊也比較熟悉，也是我本科畢設題目，想想第一個博客也得心應手一點。^^_

天地圖組件的引用

1. 首先去天地圖官網，登錄或者注冊。

2. 依次點擊開發資源-網頁Api-新彈出頁面右上角控制台

3. 在控制台頁面，單擊右上角創建新應用，隨便填一填巴拉巴拉。

4. 申請成功后記住你的key。

5. 我新建了一個vue項目，這個項目啥也沒有，像丁真一樣純真。

6. 找到 index.html 這個文件 把下列代碼復制進去，實現全局引入 （當然你也可以粘貼在某個vue頁面上來實現按需引入）

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

7. 保存，刷新Vue項目，打開F12控制台發現請求成功。

8. 新建一個vue文件，在你像要防止地圖的地方新建一個div，定義他的大小，id自己命名，我取名為map。

   <div class="bodyAll">
       <div id="map" style="height:100%;width:100%"></div>
     </div>
   

9. 在methods書寫initMap()方法並在mounted里引用。別忘在data return 里注入map:{}

     methods: {
       initMap() {
         let T = window.T;//全局引入后T被注冊到window里，在從這兒拿到T。T包含了天地圖提供的各種方法等。
         this.map = new T.Map("map");
         this.map.centerAndZoom(new T.LngLat(112, 36), 7);//三個參數分別為經度，緯度，縮放等級。
       },
     },
     mounted() {
       this.initMap();
     },
   

10. 蕪湖~已經能加載出來啦。第一次寫博客，能加載出來就算成功^^_

參考鏈接

• 天地圖官網：https://www.tianditu.gov.cn/
• 項目源碼：https://github.com/lululutx/vue-tianditu