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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
js实现多图左右切换功能
Aug 04 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
咖啡知识大全
2021/03/03 新手入门
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
浅析vue-router原理
2018/10/19 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Python实现端口检测的方法
2018/07/24 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
小学数学课后反思
2014/04/23 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
求职自荐信怎么写
2015/03/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python