一、引入高德地圖

　　一般用使用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" />

　　這樣你將所有的高德地圖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

總結

以上是生活随笔為你收集整理的vue项目中使用地图组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。