vue-baidu-map 进入页面自动定位的解决方案(推荐)

前端之家收集整理的这篇文章主要介绍了vue-baidu-map 进入页面自动定位的解决方案(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考。若有不完善的地方,欢迎各位大佬指出!,希望对你有帮助!

好了,入正题。其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法。直到今天,在冒昧地向大佬提了一个 issue,才点醒了我。其实是因为太过急功近利了,没有认真阅读 vue-baidu-map 提供,也有可能是看过然后忘记了!

首先要明确一点():由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。

错误用法

我试过,以上这种方法好像是可行,效果可以出来,但我们最好采用作者提供的正确方法

正确用法

推荐这种方法!那下面解决进入页面自动定位的方法也是在这里。

下面是我的写法,仅供参考,有不足请指出,我只是一个小白,哈哈!

Template:

JS实现:

export default { data () { return { // 省略一部分 autoLocationPoint: {lng: 0,lat: 0},initLocation: false,} },methods: { handler ({BMap,map}) { let _this = this; // 设置一个临时变量指向vue实例,因为在百度地图回调里使用this,指向的不是vue实例; var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ console.log(r); _this.center = {lng: r.longitude,lat: r.latitude}; // 设置center属性值 _this.autoLocationPoint = {lng: r.longitude,lat: r.latitude}; // 自定义覆盖物 _this.initLocation = true; console.log('center:',_this.center) // 如果这里直接使用this是不行的 },{enableHighAccuracy: true})
    // 下面注释是<a href="/tag/baidu/" target="_blank" class="keywords">百度</a>地图API官方<a href="/tag/shixianfangfa/" target="_blank" class="keywords">实现方法</a>,因为我使用<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>图标覆盖物,所以没有使用这种<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>!
    // 如使用以下这种<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>,那么我Template里所写的<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>定位图标<a href="/tag/daima/" target="_blank" class="keywords">代码</a>是不需要的
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function(r){
    // if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //   var mk = new BMap.Marker(r.point);
    //   map.addOverlay(mk);
    //   map.panTo(r.point);
    //   alert('您的位置:'+r.point.lng+','+r.point.lat);
    // }
    // else {
    //   alert('<a href="/tag/Failed/" target="_blank" class="keywords">Failed</a>'+this.getStatus());
    // }
    // },{enableHighAccuracy: true})
  }
}

}

如果是直接的朋友请注意,要有选择的复制,因为我没有把全部代码贴出了,直接复制到你的项目是会出问题的!不过这代码比较简单,稍微就能看懂,哈哈!

以上所述是小编给大家介绍的vue-baidu-map 进入页面自动定位的解决方案。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章