vue之 IOS苹果自动定位问题 vue-baidu-map首次进入无法定位问题
文章 3811 0 0 0
发布时间:2019年05月27日

概述

最近在用vue开发应用,要用到百度地图,基本功能都有实现过,但是到vue上用的一个vue-baidu-map封装组件,官网:https://dafrok.github.io/vue-baidu-map/#/zh/index ,点击进去就是使用文档,但是有很多坑,需要自己去碰坑,填坑,用坑了

百度地图

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你的key'
})

当然我只用到了这些,所以就只引入这些,其他的要使用的可以对照文档引入使用

<baidu-map class="map" @ready="handler" @load="mapLoad">
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
</baidu-map>

你对地图进行事件处理,必须要在ready事件之后,否者取不到BMap对象的(mapAK是百度key)

handler方法会传入两个对象,使用过JS SDK的人应该知道,对,传入的参数就是对应的JS sdk里面的对象,直接拿来直接使用,虽然插件有提供标签,但是对应的属性和方法太少了,所以还是通过SDK提供的方法来调用比较好,

但是现在这些在安卓电脑上都没有问题苹果7却出现了进去以后获取不到的问题,经过查找发现getCurrentPosition的问题,我们去试这打印这个函数发现苹果7下的getCurrentPosition无法获取

geolocation.SW
//首次进入此值不会存在
,但是我们切换页面回来发现这个方法就能正常使用了,但是你总不能告诉用户你切换一下就能用,所以在百般实验的情况下发现,偶然间发现在对这个方法去判断首次进入就能正常使用,看着这个鸡肋的代码有种想哭的冲动!因为你不能把下面的getCurrentPosition(function(r) {})函数放到那个判断里面去,入坑结束。

if(geolocation.getCurrentPosition()){
    console.log('function')
}else{
    console.log('function2')
}

//代码如下

handler({BMap,map}) {
    this.$loading.show('');
    let that = this;
    var geolocation = new BMap.Geolocation();
    console.log(geolocation.SW)
    if(geolocation.getCurrentPosition()){
        console.log('function')
    }else{
        console.log('function2')
    }
    geolocation.getCurrentPosition(function(r) {
        console.log('当前定位参数:', r);
        console.log(map)
        if(this.getStatus() == BMAP_STATUS_SUCCESS){//定位正确逻辑
            var mk = new BMap.Marker(r.point);
            console.log(r.point)
            console.log(mk)
            map.addOverlay(mk);
            map.panTo(r.point);
            //逻辑代码
        }else{
            //定位错误逻辑
        }
    },{
        enableHighAccuracy: true
    })
},
评论专区