一、引入高德地圖

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

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

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

1、創(chuàng)建一個地圖組件：

　　vue創(chuàng)建組件不贅述

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

　　methods:{
        getMap(){
            // AMap是高德地圖的構(gòu)造函數(shù)，這里.Map是創(chuàng)建地圖，.Marker是創(chuàng)建坐標點
            let mapObj = new AMap.Map('container', {//'container'是對應(yīng)頁面盒子的id
                resizeEnable: true, //自適應(yīng)大小
                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）地圖描點

　　在使用上述方法創(chuàng)建地圖實例后，直接調(diào)用AMap的Marker方法

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

（2）傳入兩個點的經(jīng)緯度坐標繪制路線

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

　　2、第二個參數(shù)是一個回調(diào)函數(shù)，在里面實例化步行路線，代碼如下

    AMap.service('AMap.Walking', function() { //回調(diào)函數(shù)
        var MWalk = new AMap.Walking({
            map: _this.mapObj
        }); //構(gòu)造路線導(dǎo)航類

        MWalk.search(['當前經(jīng)度', '當前緯度'], ['目標經(jīng)度', '目標緯度'], function(status, result) {})
    })

（3）用戶定位

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

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

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

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

　　第三步在回調(diào)函數(shù)中，實例化一個定位的實例geolocation，可以配置相關(guān)參數(shù)：定位配置參數(shù)傳送門

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

　　第四步監(jiān)聽定位是否成功還是失敗，成功則可以得到當前位置的經(jīng)度和緯度

    AMap.event.addListener(geolocation, 'complete', function(data) {
        data.position.getLng() //定位成功返回的經(jīng)度
        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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。