这次给大家带来怎样做出vue-baidu-map进入页面自动定位，vue-baidu-map进入页面自动定位的注意事项有哪些，下面就是实战案例，一起来看一下。
其实之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在GitHub 冒昧地向大佬提了一个 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}) // 下面注释是百度地图API官方实现方法，因为我使用自定义图标覆盖物，所以没有使用这种方法！ // 如使用以下这种方法，那么我Template里所写的自定义定位图标代码是不需要的 // 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('failed'+this.getStatus()); // } // },{enableHighAccuracy: true}) } } }
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何使用vue组件实现弹出框点击显示隐藏
如何使用vue弹窗消息组件
以上就是怎样做出vue-baidu-map进入页面自动定位的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2751527.html
