vue-baidu-map 进入页面自动定位的解决方案(推荐)

 更新时间:2018年04月28日 08:42:36   作者:越前君   我要评论

这篇文章主要介绍了vue-baidu-map 进入页面自动定位的解决方案,需要的朋友可以参考下

写在前面:我只是一个前端小白,文章中的提到可能会有不足之处,仅提供一个参考。若有不完善的地方,欢迎各位大佬指出!,希望对你有帮助!

好了,入正题。其实之前也被这问题困扰过,在网上也查了一番,没找到解决方法。直到今天,在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 进入页面自动定位的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue项目中使用tinymce编辑器的步骤详解

    vue项目中使用tinymce编辑器的步骤详解

    本文分步骤给大家介绍了vue项目中使用tinymce编辑器的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue2.0实现的tab标签切换效果(内容可自定义)示例

    vue2.0实现的tab标签切换效果(内容可自定义)示例

    这篇文章主要介绍了vue2.0实现的tab标签切换效果,结合实例形式分析了vue.js实现内容可自定义的tab点击切换功能相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • vue在自定义组件中使用v-model进行数据绑定的方法

    vue在自定义组件中使用v-model进行数据绑定的方法

    这篇文章主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解vue-cli中使用rem,vue自适应

    详解vue-cli中使用rem,vue自适应

    这篇文章主要介绍了vue-cli使用rem,vue自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • nuxt.js中间件实现拦截权限判断的方法

    nuxt.js中间件实现拦截权限判断的方法

    这篇文章主要介绍了nuxt.js中间件实现拦截权限判断的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    这篇文章主要介绍了推荐VSCode 上特别好用的 Vue 插件之vetur,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    在Vuex使用dispatch和commit来调用mutations的区别详解

    今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue使用jsonp抓取qq音乐数据的方法

    vue使用jsonp抓取qq音乐数据的方法

    这篇文章主要介绍了vue使用jsonp抓取qq音乐数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • webpack+vue.js实现组件化详解

    webpack+vue.js实现组件化详解

    vue的开发体验还是比较愉悦的。首先文档非常友好,所以上手会比较快。其次,配合webpack和vue-loader,每个页面都是一个.vue文件,写起来很方便。所以很适合做组件化开发,这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
    2016-10-10
  • vue单页缓存存在的问题及解决方案(小结)

    vue单页缓存存在的问题及解决方案(小结)

    这篇文章主要介绍了vue单页缓存存在的问题及解决方案(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论