vue項目中使用地圖組件

一、引入高德地圖

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

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=00f17a49393d44b304857015c96ae61c"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

　　這樣你將所有的高德地圖api引入你的項目，到這里你肯定會問，vue每個組件該怎么直接調用呢？

1、創建一個地圖組件：

　　vue創建組件不贅述

　　首先，你得有一個高德地圖實例，所以new一個嘛。建議將地圖的實例化寫在methods中，然后在mounted中調用方法

　　methods:{ getMap(){ // AMap是高德地圖的構造函數，這里.Map是創建地圖，.Marker是創建坐標點
            let mapObj = new AMap.Map('container', {//'container'是對應頁面盒子的id
                resizeEnable: true, //自適應大小
                zoom: 8//初始視窗
                ,center: [114.308075, 30.950187]//中心點
 }); let config = { url:'/api/map', method:'get' } axios(config).then(function(response){ let marker = new AMap.Marker({ position:[response.data[0].x, response.data[0].y] }); marker.setMap(mapObj); }).catch(function(e){ console.log(e) }) } }, mounted(){ this.getMap(); }

2、下面介紹使用地圖的三種API

（1）地圖描點

　　在使用上述方法創建地圖實例后，直接調用AMap的Marker方法

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

（2）傳入兩個點的經緯度坐標繪制路線

　　1、調用AMap的server方法，第一個參數可以有三種選擇：步行、打車、公交

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

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

（3）用戶定位

　　第一步當然是創建地圖實例，由於定位不需要展示地圖，所以可以將地圖掛載的盒子css樣式設置為寬高都設置為0，這樣就不影響頁面的布局

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

　　第二步創建實例之后需要使用高德地圖的一個定位插件，AMap.Geolocation，用plugin方法調用

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

　　第三步在回調函數中，實例化一個定位的實例geolocation，可以配置相關參數：定位配置參數傳送門

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

　　第四步監聽定位是否成功還是失敗，成功則可以得到當前位置的經度和緯度

    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('獲取您當前位置失敗！') } });

二、使用基於vue2.0和高德地圖的組件vue-amap

　　Github：ElemeFE/vue-amap

　　文檔： vue-amap