一、使用浏览器自带的方法
注：
目前大多数浏览器（包括手机端），已经不支持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>
效果：