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进阶教程(第四课第一部分)
Apr 05 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
javascript控制台详解
Jun 25 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php检测文本的编码
2015/07/26 PHP
javascript静态的url如何传递
2007/05/03 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
校园学雷锋活动月总结
2014/03/09 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python