uni-app開發(fā)小程序使用uni.getLocation()實現(xiàn)頁面即時獲取當前定位信息demo

前端  /  管理員 發(fā)布于 3年前   17178

uniapp開發(fā)百度小程序實現(xiàn)實時獲取當前定位功能，接上一篇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: { //參數(shù)
                    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, "經(jīng)緯度授權")

                        if (that.getPlistData.lat === res.latitude && that.getPlistData.lng === res.longitude) {
                            console.log('位置相同,不請求數(shù)據(jù)')
                            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, "經(jīng)緯度沒有授權")
                        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省略...

看看效果圖：

獲取定位詳細數(shù)據(jù)

實時獲取定位數(shù)據(jù)

完