一、使用瀏覽器自帶的方法

注：

　　目前大多數瀏覽器（包括手機端），已經不支援http的請求獲取使用者地址，必須為https域名的才能發起請求。

　　使用者必須啟動GPS定位

module.exports = {
    devServer: {
        https: true// 開啟https
    }
}

使用：

browser() {
    //判斷是否支援 獲取本地位置
    if (navigator.geolocation) {
        var n = navigator.geolocation.getCurrentPosition(
            
 
function (res) {
                console.log(res); // 需要的座標地址就在res中
            },
            function (err) {
                console.log(err)
            }
        );
    } else {
        alert('該瀏覽器不支援定位');
    }
}

需要使用者許可權：

　　有許可權：

　　沒許可權：

雖然獲取到了本地座標，如果要在百度地圖上顯示的話，並不準確，需要轉換成百度座標。

完整程式碼：獲取GPS座標並轉換為百度座標

<template>
    <div class="home">
        <div class="hello">
            <p>狀態：{{ state }}</p>
            <p>經度：{{ latitude }}</p>
            <p>緯度：{{ longitude }}</p>
            <p>精確度：{{ accuracy }}</p>
        </div>
        <
 
div id="map" style="width: 100%;height: 500px"></div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                state: '',      // 狀態
                latitude: '',    // 經度
                longitude: '',  // 緯度
                accuracy: '',    // 精確度
                map: '' // 地圖初始化
            }
        },
        mounted() {
            this.browser()
            // 地圖初始化
            this.map = new BMap.Map('map');
        },
        methods: {
            // 瀏覽器獲取使用者位置資訊
            browser() {
                const _this = this
                //判斷是否支援 獲取本地位置
                if (navigator.geolocation) {
                    var n = navigator.geolocation.getCurrentPosition(
                        function (res) {
                            _this.state = '獲取成功'
                            _this.latitude = res.coords.latitude;
                            _this.longitude = res.coords.longitude;
                            _this.accuracy = res.coords.accuracy;
                            
                            // 百度地圖
                            // 獲取GPS得到的座標
                            var ggPoint = new BMap.Point(_this.longitude,_this.latitude);
                            // 初始化地圖,設定中心點座標和地圖級別
                            _this.map.centerAndZoom(ggPoint, 16)
                            _this.map.addControl(new BMap.NavigationControl());
                            //新增GPS marker和label
                            var markergg = new BMap.Marker(ggPoint);
                            _this.map.addOverlay(markergg); //新增GPS marker
                            var labelgg = new BMap.Label("未轉換的GPS座標（錯誤）",{offset:new BMap.Size(20,-10)});
                            markergg.setLabel(labelgg); //新增GPS label
                            setTimeout(function(){
                                var convertor = new BMap.Convertor();
                                var pointArr = [];
                                pointArr.push(ggPoint);
                                convertor.translate(pointArr, 1, 5, _this.translateCallback)
                            }, 1000);
                            _this.map.enableScrollWheelZoom(true)
                        },
                        function (err) {
                            _this.state = '失敗'
                        }
                    );
                } else {
                    alert('該瀏覽器不支援定位');
                }
            },
            //座標轉換完之後的回撥函式
            translateCallback(data) {
                if(data.status === 0) {
                    var marker = new BMap.Marker(data.points[0]);
                    this.map.addOverlay(marker);
                    var label = new BMap.Label("轉換後的百度座標（正確）",{offset:new BMap.Size(20,-10)});
                    marker.setLabel(label); //新增百度label
                    this.map.setCenter(data.points[0]);
                }
            }
        }
    }
</script>

效果：

二、通過地圖提供的JS，獲取位置。

注：

　　使用者啟動GPS地位（比較準）

　　使用者不啟動GPS地位（不準）

這裡以百度地圖為例

下載：

npm i vue-baidu-map

index.html

百度祕鑰：http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度祕鑰y&s=1"></script>

vue.config.js

pages: {
    index: {
        externals:{
            BMap:'BMap'
        }
    }
},

使用：

<div id="map" style="width: 100%;height: 500px"></div>

// 百度地圖
createMap() {
    const _this = this;
    // 建立Map例項
    var map = new BMap.Map('map')
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,16);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            _this.longitude = r.point.lng;
            _this.latitude = r.point.lat;
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})
    //開啟滑鼠滾輪縮放
    map.enableScrollWheelZoom(true)
}

完整程式碼：百度定位及圓形檢索

<template>
  <div class="about">
    <div class="hello">
      <p>狀態：{{ state }}</p>
      <p>經度：{{ latitude }}</p>
      <p>緯度：{{ longitude }}</p>
      <p>精確度：{{ accuracy }}</p>
      <ul>
        <li><h3>注：<span style="color: red">使用者啟動GPS定位：定位準確</span></h3></li>
        <li><h3>注：<span style="color: red">使用者不啟動GPS定位：定位不準確</span></h3></li>
      </ul>
    </div>
    <div id="map" style="width: 100%;height: 500px"></div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        state: '',      // 狀態
        latitude: '',    // 經度
        longitude: '',  // 緯度
        accuracy: ''    // 精確度
      }
    },
    mounted() {
      this.createMap()
    },
    methods: {
      // 百度地圖
      createMap() {
        const _this = this;
        // 建立Map例項
        var map = new BMap.Map('map')
        // 初始位置
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point,16);
        // 獲取使用者位置資訊並紅點定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          if(this.getStatus() === BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            // 使用者位置資訊
            _this.longitude = r.point.lng;
            _this.latitude = r.point.lat;
            // 紅點定位
            map.addOverlay(mk);
            map.panTo(r.point);
            // 圓形區域檢索：把初始位置改成使用者位置
            point.lng = _this.longitude
            point.lat = _this.latitude
            // 已使用者位置為中心畫圈
            var circle = new BMap.Circle(point,500,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
            map.addOverlay(circle);
            // 檢索條件
            var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
            local.searchNearby('餐館',Point,500);
          }
          else {
            alert('failed'+this.getStatus());
          }
        },{enableHighAccuracy: true})
        //開啟滑鼠滾輪縮放
        map.enableScrollWheelZoom(true)
      }
    }
  }
</script>

效果：

三、通過微信API(這個需要公眾號 / 小程式)