标签：map point 前端 用户 获取 BMap var new GPS
一、使用浏览器自带的方法
注：
目前大多数浏览器（包括手机端），已经不支持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(这个需要公众号 / 小程序)
标签：map,point,前端,用户,获取,BMap,var,new,GPS 来源： https://www.cnblogs.com/huoqin/p/13784805.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。