小程序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 || ''}`;//地址
}
},