uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo

前端  /  管理员 发布于 3年前   17357

uniapp开发百度小程序实现实时获取当前定位功能，接上一篇uni-app文章

uni.getLocation:获取当前的地理位置、速度。

官方手册：

https://uniapp.dcloud.io/api/location/location?id=getlocation

视图省略...

js代码:

<script>
    from '@/utils/utils.js'
    let timer;
    export default {
        data() {
            return {
                getPlistData: { //参数
                    lat:'',
                    lng:'',
                    city:''
                },
            };
        },
        components: {
        },
        onReachBottom() {
        },
        onLoad(e:any) {
            let that = this;
        },
        onHide() {
            clearInterval(timer)
            console.log("页面隐藏onHide")

        },
        onShow() {
            let that:any = this;
            that.getContactsApi()
            console.log("页面onShow")
            clearInterval(timer)
            timer = setInterval(function() {
                that.getContactsApi()
            }, 30000)
        },

        methods: {
            getContactsApi():void {
                let that:any = this;
                that.getLocationAuth(false);

            },

            getLocationAuth(flag:any = false):void  {
                let that:any = this;
                uni.getLocation({
                    type: 'wgs84',
                    altitude: true,
                    success: function(res:any) {
                        console.log(res, "经纬度授权")

                        if (that.getPlistData.lat === res.latitude && that.getPlistData.lng === res.longitude) {
                            console.log('位置相同,不请求数据')
                            return
                        } else {
                            console.log('位置')
                        }
                        that.addressTop = "定位中..."
                        that.getPlistData.lat = res.latitude;
                        that.getPlistData.lng = res.longitude;

                        getMapSdk.locationCity(res.latitude, res.longitude).then(res => {
                            console.log(res, "当前定位--------------------------------------");
                            that.addressTop = res.result.address
                            if (flag) {
                                var str = res.city.result.address_component
                                str = str.substring(0, res.city.length - 1);
                                that.getPlistData.city = str;
                            }
                            that.getData();
                        })
                    },
                    fail: function(res:any) {
                        console.log(res, "经纬度没有授权")
                        uni.getSetting({
                            success: (res:any) => {
                                let authSetting = res.authSetting;
                                if (!res.authSetting['scope.userLocation']) {
                                    uni.showModal({
                                        title: '您未开启地理位置授权',
                                        content: '小程序将无法正常使用',
                                        success: (res:any)=> {
                                            if (res.confirm) {
                                                uni.openSetting()
                                            }
                                        }
                                    })
                                } else {
                                    uni.showModal({
                                        title: '您未开启手机地理位置',
                                        content: '小程序将无法正常使用',
                                        success: (res:any) => {
                                            if (res.confirm) {
                                                uni.openSetting()
                                            }
                                        }
                                    })
                                }
                            }
                        })
                    }
                });
            },
        },
        computed: {
        }
    }
</script>

css省略...

看看效果图：

获取定位详细数据

实时获取定位数据

完