前端获取用户位置信息

一、使用浏览器自带的方法

注：

　　目前大多数浏览器（包括手机端），已经不支持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=" 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=" 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=" 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(这个需要公众号 / 小程序)