小程序uniapp获取经纬度、地址

// 由于这里进行了一些api的封装,可参考代码
// https://www.jianshu.com/p/80e33d16182f  

//引用的一些方法放下面了,我一般都是封装到单独的js文件引进来

//GetAddress.js  引入使用放在最底部

//一、这里是获取经纬度(包括调取用户设置,对用户设置的判断)

export default async function wxGetLocation() {
    try {
        //小程序获取地理位置
        let result = await getLocationApi({})
        return result
    } catch (err) {
        let scope = 'scope.userLocation'
        let setting = await wxGetSetting() //获取用户的当前设置
        if (!setting[scope]) {
            let result = await showModalApi({
                content: '您拒绝了定位权限,将无法正常使用此功能',
                confirmText: '去开启'
            })
            if (result.confirm) {
                let auth = await wxOpenSetting()
                if (auth.authSetting[scope]) {
                    let result = await getLocationApi({})
                    return result
                }
                showToastApi({
                    title: '您拒绝了定位权限'
                })
                return false
            }
            return false
        }
    }
}

//二、这里把经纬度转成地址
 

import {//返回非经纬度地址
    AMAPKEY
} from "@/common/config.js"
const amapFile = require('./amap-wx.130.js') //这里引入高德地图
const myAmapFun = new amapFile.AMapWX({
    key: AMAPKEY
});
export default function wxGetAddress({
    longitude,
    latitude
}) {
    return new Promise((resolve, reject) => {
        myAmapFun.getRegeo({
            location: `${longitude},${latitude}`,
            success: (res) => {
                resolve(res[0])
            },
            fail: (err) => {
                resolve(null)
            }
        })
    })
}

function wxGetSetting() {//获取用户的当前设置
    return new Promise((resovle, reject) => {
        uni.getSetting({
            success: (res) => {
                resovle(res.authSetting)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

 function wxOpenSetting() {//调起客户端小程序设置界面,返回用户设置的操作结果。
    return new Promise((resovle, reject) => {
        uni.openSetting({
            success: (res) => {
                resovle(res)
            }
        })
    })
}

function getLocationApi({//获取用户经纬度
    type = 'gcj02',
    altitude = false,
    geocode = false,
    isHighAccuracy = false
}) {
    return new Promise((resovle, reject) => {
        uni.getLocation({ 
            type,//返回坐标形式
            altitude,//传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度
            geocode,//默认false,是否解析地址信息
            isHighAccuracy,//开启高精度定位
            success: res => {
                resovle(res)
            },
            fail: (err) => {
                reject(err)
            }
        });
    })
}

 function showModalApi({//消息提示框操作框
    title = '提示', //    String    否    提示的标题    
    content = 'content', //    String    否    提示的内容    
    showCancel = true, //    Boolean    否    是否显示取消按钮,默认为 true    
    cancelText = '取消', //    String    否    取消按钮的文字,默认为"取消"    
    cancelColor = '#000000', //    HexColor    否    取消按钮的文字颜色,默认为"#000000"    H5、微信小程序、百度小程序
    confirmText = '确定', //    String    否    确定按钮的文字,默认为"确定"
    confirmColor = '#576B95', //HexColor 否 确定按钮的文字颜色
    editable = false, //    Boolean    否    是否显示输入框    H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)
    placeholderText = '', //    String    否    显示输入框时的提示文本    H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+) 
}) {
    return new Promise((resovle, reject) => {
        uni.showModal({
            title,
            content,
            showCancel,
            cancelText,
            cancelColor,
            confirmText,
            confirmColor,
            editable,
            placeholderText,
            success: (res) => {
                resovle(res)
            },
            fail: (err) => {
                reject(err);
            }
        });
    })
}

function showToastApi({//消息提示框
    title = 'message', //String    是    提示的内容,长度与 icon 取值有关。    
    icon = 'none', //    String    否    图标,有效值详见下方说明。    
    image = '', //    String    否    自定义图标的本地路径(app端暂不支持gif)    App、H5、微信小程序、百度小程序
    mask = false, //    Boolean    否    是否显示透明蒙层,防止触摸穿透,默认:false    App、微信小程序
    duration = 1500, //Number    否    提示的延迟时间,单位毫秒,默认:1500    
    position = 'center', //    String    否    纯文本轻提示显示位置,填写有效值后只有 title 属性生效, 有效值详见下方说明。    App

}) {
    uni.showToast({
        title,
        icon,
        image,
        mask,
        duration,
        position,
        success: (res) => {
            envlog({
                msg: res
            })
        },
        fail: (err) => {
            envlog({
                msg: err
            })
        }
    });
}

//三、使用GetAddress.js获取地址和经纬度

//test.vue

import { wxGetLocation, wxGetAddress } from './GetAddress.js';

    data() {
        return {
            address: '',
            longitude:'',
            latitude:'',
        };
    },

    async onLoad() {//获取地址,并进行地址编码
        let result = await wxGetLocation();
        if (result) {
            this.longitude=result.longitude//经度
            this.latitude=result.latitude//纬度
            let address = await wxGetAddress({ longitude: result.longitude, latitude: result.latitude });
            this.address = `${address.name || ''}${address.desc || ''}`;//地址
        }
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值