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


Posted in Javascript onApril 28, 2018

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

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

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

错误用法

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

正确用法

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

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

Template:

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true"
    :mapStyle="{styleJson: styleJson}">
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"
      :locationIcon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" 
      @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
    </bm-geolocation>
    <!-- 自定义定位图标覆盖物 -->
    <bm-marker :position="autoLocationPoint"
      :icon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" v-if="initLocation">
    </bm-marker>
  </baidu-map>
</template>

JS实现:

<script>
  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})
      }
    }
  }
</script>

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

以上所述是小编给大家介绍的vue-baidu-map 进入页面自动定位的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
JS实现图片切换特效
Dec 23 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 #Javascript
React Native日期时间选择组件的示例代码
Apr 27 #Javascript
vue实现点击展开点击收起效果
Apr 27 #Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 #Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 #Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 #Javascript
You might like
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
列表内容的选择
2006/06/30 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python计算N天之后日期的方法
2015/03/31 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python下Fabric的简单部署方法
2015/07/14 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
整改通知书
2015/04/20 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技