小程序uniapp获取经纬度、地址（获取用户当前设置、调起用户设置页、获取用户经度、获取用户地址、消息提示框、消息操作框等方法封装）
新建一个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)
}
})
})
}
三，页面使用（获取地址和经纬度）
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 || ''}`;//地址
}
},
ps：文章上面用到的相关方法
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
})
}
});
}
