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入门教程(9) Document文档对象
Jan 31 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
JavaScript实现横版菜单栏
Mar 17 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 中的closure用法详解
2017/06/12 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
js数组操作常用方法
2014/05/08 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python生成器generator用法实例分析
2015/06/04 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
浅谈Python中的bs4基础
2018/10/21 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
查环查孕证明
2014/01/10 职场文书
清洁工岗位职责
2014/01/29 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
python基于opencv批量生成验证码的示例
2021/04/28 Python
英镑符号 £
2022/02/17 杂记
Nginx反向代理、重定向
2022/04/13 Servers