前言
-
使用地图的项目中经常会出现定位问题,进入页面是需要一个地图中兴点默认值,来生成地图
-
如果这个值写死,就会出现不管谁在任何地方使用这个系统位置是不会动的,用户体验不好
-
其实百度地图是提供了这个api的,使用这个api就可以获取用户的经纬度
-
这个api原理是根据你计算机的ip地址获取定位,网络原因会出次定位不准问题。
-
这个api在别的浏览器(除谷歌之外)可能还有兼容问题,需要测试
-
如果域名不是https每次使用还需要用户确认,取消的话他就不会调用了。
-
如果一进到页面,百度这个定位api确认定位之后,并没有生效的话,不用管,等一下他会自己调用
代码实现-在有地图的页面调用这段代码
// 下面注释是百度地图API官方实现方法,
const _this = this
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(
function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// map.clearOverlays() //清除地图上所有覆盖物
var mk = new BMap.Marker(r.point)
console.log('2')
map.addOverlay(mk)
// 移动地图中心点
map.panTo(r.point)
_this.zoom = 15
_this.center = r.point
_this.$message.success('自动定位成功,可能有误差')
} else {
console.log('2')
// alert('failed' + this.getStatus())
_this.$message.success('自动定位失败,请稍后')
}
},
{ enableHighAccuracy: true }
)
总结:
经过这一趟流程下来相信你也对 vue-使用Baidu(百度地图)实现输入位置获取定位经纬度 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕