基於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