先注册百度地图开放平台 获取ak
阿里云有免费的ssl 证书可以去申请一下
做好了上面的准备之后 看一下下面的效果图
谷歌浏览器 的注意了 可以换ie 查看
有bug 请看后面的注意事项
下面是代码了:
首先在vue3 目录下 引入https 的 百度地图链接。 ak 填写自己的 百度平台ak.
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=*****"></script>
其次vue3代码:getMyPoint 说的是获取当前的经纬度,非常重要。我出问题的点也是在这,由于现在的安全考虑,百度地图在https域名都获取不到精确的经纬度了。 getdistancefn 方法就是用来判断经纬度之间距离的,这个方法还是很不错的 没啥大问题。
// 通过浏览器定位获得我的经纬度
const getMyPoint = () => {
// var self = this
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (res) {
console.log(geolocation, '位置信息')
pointA.value = new BMap.Point(res.point.lng, res.point.lat) // 通过浏览器获得我的经纬度
console.log(pointA.value)
})
}
// 测量百度地图两个点间的距离
const getDistancefn = () => {
var map = new BMap.Map('container')
pointB.value = new BMap.Point(
parseFloat('123.041951'),
parseFloat('46.079287')
) // 店铺的经纬度
map.centerAndZoom(pointB.value, 15)
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
console.log(pointA.value, 'a')
console.log(pointB.value, 'b')
let a = (map.getDistance(pointB.value, pointA.value) / 1000).toFixed(2)
distanceour.value = a
return a
// (
// alert(a)
// ).toFixed(2) // 保留小数点后两位
// console.log(a, '距离')
}
最后在使用的时候,进行一下,pointA的值验证一下是否为空。 我上面计算出来的 是距离多少公里,所以对比的时候也是使用的公里来进行的。
var arr: any = Object.getOwnPropertyNames(pointA.value)
if (arr.length == 0) {
Dialog.confirm({
title: '信息',
message: '还未获取当前定位请稍等',
})
getMyPoint()
return
}
let distance: any = getDistancefn()
if (distance > 5) {
Dialog.confirm({
title: '提示',
message: '请距离五公里在进行签到,谢谢',
})
getMyPoint()
return
}
因为定位只能定位到市,所以这个bug改了好久,如果对您起到帮助请关注我一下吧,后面还会分享精品文章。
注意事项:
1.获取精准的经纬度,需要https,没有https,先去认证ssl
2.ie浏览器很精准,谷歌浏览器,获取不到精准定位,只能定位到市。
3.我当时做的时候是在微信内部浏览器,在电脑上的威信内置获取不到,手机端没问题
4.认证了https 后需要等一段时间 手机上才能获取到 不要心急。