定位4.点击按钮获取地图选择位置+整合代码独立封装+定位全部代码

详见：码云小程序demo1 1.wxml <van-cell-group> {{address}} <!-- autosize:自适应 获取授权，获取经纬度 --> <van-field autosize type="textarea" model:value="{{ s_address }}" center clearable label="短信验证码" placeholder="请输入短信验证码" border="{{ false }}" use-button-slot> <van-button custom-style="width:100rpx" slot="button" size="small" type="primary" icon="location-o" bindtap="getAddress3"></van-button> </van-field> <!--获取授权，打开地图选择位置--> <van-field autosize type="textarea" model:value="{{ r_address }}" center clearable label="短信验证码" placeholder="请输入短信验证码" border="{{ false }}" use-button-slot> <van-button custom-style="width:100rpx" slot="button" size="small" type="primary" icon="location-o" bindtap="chooseAddress3"></van-button> </van-field> </van-cell-group> 2.js import Router from '../../utils/index' import { $getLocation, $chooseLocation } from '../../utils/location' Router({ /** * 页面的初始数据 */ data: { s_address: '', r_address: '', }, //转化成同步 执行函数$chooseLocation，并打印 async chooseAddress3() { let res = await $chooseLocation() this.$set('r_address', res) }, async getAddress3() { //转化成同步 执行函数$getLocation，并打印 let res = await $getLocation() console.log(res); if (res) { let address = await this.$get('https://apis.map.qq.com/ws/geocoder/v1/', { //将经纬度转化成 例：39.984154,116.307490的格式 location: [res.lat, res.lng].join(), key: 'K2VBZ-IM5WO-V65W7-SV4SA-W4HYF-VSFD3' }) //打印地址 this.$set('s_address', address.result.address + address.result.formatted_addresses.recommend) } }, } 3.封装的 $getLocation和$chooseLocation import { $msg } from './index' import { getSetting, openSetting } from './setting' /** * 对外获取经纬度方法 */ export let $getLocation = () => fixedSetting(getLocation) /** * 对外选择地址方法 */ export let $chooseLocation = () => fixedSetting(chooseLocation) /** *统一获取授权 */ async function fixedSetting(callback) { //先查看是否有定位权限 let res = await getSetting('scope.userLocation') //如果有权限，或者第一次请求此权限，则正常获取位置 if (res || res === undefined) { return await callback() } else { //如果之前请求权限被拒绝过，则打开设置页 let res1 = await openSetting('scope.userLocation') //根据设置页的结果，再次获取定位 if (res1) { return await callback() } else $msg("为了不影响您的使用，请授权定位") } } /** * 用Promise包裹getLocation 返回经纬度 */ function getLocation() { return new Promise((resolve) => { //使用Promise，成功返回resolve wx.getLocation({ //使用getLocation，询问授权 success({ //成功返回解构的lng,lat longitude: lng, latitude: lat }) { resolve({ lng, lat }); }, fail: () => $msg("为了不影响您的使用，请授权定位") //失败提示 }) }) } /** * 用Promise包裹chooseLocation,返回选择的地址 */ function chooseLocation() { return new Promise((resolve) => { //使用Promise，成功返回resolve wx.chooseLocation({ success({ address, name }) { resolve( address + name ) }, fail: () => $msg("为了不影响您的使用，请授权定位") //失败提示 }) }) } 4.独立的setting ：获取目前请求过的权限和打开设置页 /** * 获取目前请求过的权限 * @param {*} permission */ export function getSetting(permission) { return new Promise((resolve) => { //使用Promise，将成功后的值return出来 wx.getSetting({ //获取用户当前设置，将定位权限的结果返回 success: (res) => { resolve(res.authSetting[permission]) //permission='scope.userLocation' } }) }) } /** * 打开设置页 * @param {*} permission */ export function openSetting(permission) { return new Promise((resolve) => { wx.openSetting({ //弹出设置页 成功返回true/false success: (res) => { resolve(res.authSetting[permission]) //permission='scope.userLocation' } }) }) } 5.根目录json权限代码 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } },