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 remove 自定义数组删除方法
Oct 20 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
vue组件学习教程
Sep 09 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
基于JavaScript实现控制下拉列表
May 08 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+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
DOM 事件流详解
2015/01/20 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
详解node中创建服务进程
2017/05/09 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
vue实现购物车的监听
2020/04/20 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python3安装Scrapy的方法步骤
2017/11/23 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
送餐员岗位职责范本
2014/02/21 职场文书
2015个人半年总结范文
2015/03/09 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python
python运算符之与用户交互
2022/04/13 Python
python三子棋游戏
2022/05/04 Python
Windows server 2016服务器基本设置
2022/08/14 Servers