Vue.js 中使用高德地圖定位及渲染地圖

看了github上面有集成的高德地圖組件，但因爲項目所要用到的很少，因此決定跟着文檔寫一寫.運行環境是vue-cli webpack

引入高德地圖

通常用使用vue-cli webpack最簡單粗暴的引入地圖api的方法就是，在入口index.html的頭部直接引入，記得必定要帶上key,若是沒有的話去高德地圖api的官網申請一個。傳送門以下：

申請key傳送門

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=************"></script>

這樣你將全部的高德地圖api引入你的項目，到這裏你確定會問，vue每一個組件該怎麼直接調用呢？
往下~

建立一個地圖組件

1. vue建立組件不贅述

2. 首先你得有一個高德地圖實例。因此，new一個嘛。建議將地圖的實例化寫在methods中，而後在mounted中調用方法。

   let mapObj = new AMap.Map('map-location', {//'map-location'是對應頁面盒子的id
           resizeEnable: true, //自適應大小
           zoom: 13//初始視窗
       });
       // AMap是高德地圖的構造函數，這裏.Map是建立地圖，.Marker是建立座標點

這樣你就建立一張地圖，一個只有地圖的地圖：}，這樣固然不行，下面就介紹使用地圖的三種API

地圖描點

1. 在使用上述方法建立地圖實例後，直接調用AMap的Marker方法

   marker = new AMap.Marker({
            map: _this.mapObj,
            position: new AMap.LngLat('經度', '緯度') //此處根據頁面數據能夠直接傳入經緯度進行描點
       })

傳入兩個點的經緯度座標繪製路線

1. 調用AMap的server方法，第一個參數能夠有三種選擇：

   • 步行
   • 打車
   • 公交

2. 第二個參數是一個回調函數，在裏面實例化步行路線，代碼以下

   AMap.service('AMap.Walking', function() { //回調函數
           var MWalk = new AMap.Walking({
               map: _this.mapObj
           }); //構造路線導航類
   
           MWalk.search(['當前經度', '當前緯度'], ['目標經度', '目標緯度'], function(status, result) {})
       })

用戶定位

1. 第一步固然是建立地圖實例，因爲定位不須要展現地圖，因此能夠將地圖掛載的盒子css樣式設置爲寬高都設置爲0，這樣就不影響頁面的佈局

   let mapObj = new AMap.Map('iCenter') //iCenter是id容器名稱

2. 建立實例以後須要使用高德地圖的一個定位插件，AMap.Geolocation,用plugin方法調用

   mapObj.plugin('AMap.Geolocation', function() {})

3. 在回調函數中，實例化一個定位的實例geolocation,能夠配置相關參數

   geolocation = new AMap.Geolocation({
           timeout: 10000,
           GeoLocationFirst: false,
           maximumAge: 0 //定位結果緩存0毫秒，默認：0
       });
       mapObj.addControl(geolocation)
       geolocation.getCurrentPosition()

   定位配置參數傳送門

4. 監聽定位是否成功仍是失敗，成功則能夠獲得當前位置的經度和緯度

   AMap.event.addListener(geolocation, 'complete', function(data) {
           data.position.getLng() //定位成功返回的經度
           data.position.getLat() //定位成功返回的緯度
       }); //返回定位信息
       AMap.event.addListener(geolocation, 'error', function(data) {
           if (data.info == 'FAILED') {
               alert('獲取您當前位置失敗！')
           }
       });

有啥問題歡迎諮詢，有錯誤也歡迎指出，謝謝~

----------分割線-----------

這篇文章寫於兩年前了，期間各項技術都有了重大更新，因近期閱讀人數較多，若是各位發現了什麼更新的api請指出，我將對文章進行修改~