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 StringBuilder类实现
Dec 22 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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
推荐一篇入门级的Class文章
2007/03/19 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
初识PHP中的Swoole
2016/04/05 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python实现多人聊天室
2020/03/31 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
商场端午节活动方案
2014/01/29 职场文书
如何撰写岗位职责
2014/02/01 职场文书
2014年防汛工作总结
2014/12/08 职场文书
网络营销计划书
2015/01/17 职场文书
公证书格式
2015/01/23 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
高中体育课教学反思
2016/02/16 职场文书
初一语文教学反思
2016/03/03 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript