前端获取用户位置信息
一、使用
注：
目前大多数浏览器（包括手机端），已经不支持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>
效果：
注：
用户启动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>
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>
效果：
