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(百度地图)实现输入位置获取定位经纬度 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

你可能感兴趣的:(实际开发-问题解决,地图(百度,高德,腾讯,vue-baidu-map),vue.js,前端,百度地图,自动获取定位经纬度,根据ip地址定位)