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

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