vue-百度地图自动获取定位
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言
-
使用地图的项目中经常会出现定位问题,进入页面是需要一个地图中兴点默认值,来生成地图
-
如果这个值写死,就会出现不管谁在任何地方使用这个系统位置是不会动的,用户体验不好
-
其实百度地图是提供了这个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(百度地图)实现输入位置获取定位经纬度 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
更多推荐
已为社区贡献26条内容
所有评论(0)