Skip to content

J
jd-vx-app
Commit 15fb2b08 authored by 肖健's avatar 肖健
Browse files
Options

编辑和新增地址获取当前位置

parent 55ba1fa5
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 7 deletions
manifest.json
View file @ 15fb2b08
{ {
"name" : "挪车", "name" : "友众挪车",
"appid" : "__UNI__F54AE0B", "appid" : "__UNI__F54AE0B",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
......
pagesD/pages/personal/addAddress.vue
View file @ 15fb2b08
...@@ -17,11 +17,13 @@ ...@@ -17,11 +17,13 @@
</u-form-item> </u-form-item>
<u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1"> <u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1">
<u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input> <u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input>
<span class="app__gps"> <span @click.stop="getAuthorize">
<image src="@/static/my/gps.png"> <span class="app__gps">
</span> <image src="@/static/my/gps.png">
<span class="app__right"> </span>
<image src="@/static/my/my6.png"> <span class="app__right">
<image src="@/static/my/my6.png">
</span>
</span> </span>
</u-form-item> </u-form-item>
<u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1"> <u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1">
...@@ -47,7 +49,9 @@ export default { ...@@ -47,7 +49,9 @@ export default {
return { return {
carNumber: "", carNumber: "",
model1: { model1: {
addressInfo: {}, addressInfo: {
address : ''
},
value: false, value: false,
}, },
rules: { rules: {
...@@ -102,6 +106,84 @@ export default { ...@@ -102,6 +106,84 @@ export default {
uni.$u.toast('请正确填写信息') uni.$u.toast('请正确填写信息')
}) })
}, },
// 用户授权
getAuthorize() {
const _this = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
_this.getLocation()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '无法获取当前位置，请手动开启授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
console.log('打开授权设置定位')
_this.getLocation()
}
},
})
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
},
})
},
// 获取用户的地理位置，
getLocation() {
const _this = this
uni.getLocation({
type: 'wgs84',
altitude: true,
success(res) {
//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
_this.loadCity(res.longitude, res.latitude)
},
fail() {
console.log('拒绝获取地理位置')
}
})
},
// 经纬度转具体城市
// 1）需要用到高德地图的逆地理编码
// 2）需要当前地理位置的经纬度
// 3）小程序的key值
loadCity(longitude, latitude) {
const that = this
uni.request({
header: {
'Content-Type': 'application/text',
},
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
longitude +
',' +
latitude +
'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
success(res) {
console.log(res);
if (res.statusCode === 200) {
if (res.data.status === '1') {
let addressInfo = res.data
//详细地址
let detailInfo = addressInfo.regeocode.formatted_address
that.model1.addressInfo.address = detailInfo
}
} else {
console.log('获取信息失败，请重试！')
}
},
})
},
}, },
onReady() { onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
......
pagesD/pages/personal/editAddress.vue
View file @ 15fb2b08
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
</u-form-item> </u-form-item>
<u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1"> <u-form-item label="收货地址:" prop="addressInfo.address" borderBottom ref="item1">
<u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input> <u--input v-model="model1.addressInfo.address" placeholder="点击选择收货地址" border="none"></u--input>
<span @click.stop="getAuthorize">
<span class="app__gps"> <span class="app__gps">
<image src="@/static/my/gps.png" > <image src="@/static/my/gps.png" >
</span> </span>
<span class="app__right"> <span class="app__right">
<image src="@/static/my/my6.png" > <image src="@/static/my/my6.png" >
</span> </span>
</span>
</u-form-item> </u-form-item>
<u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1"> <u-form-item label="楼号门牌:" prop="addressInfo.detailInfo" borderBottom ref="item1">
<u--input v-model="model1.addressInfo.detailInfo" placeholder="例如 2栋3单元101室" border="none"></u--input> <u--input v-model="model1.addressInfo.detailInfo" placeholder="例如 2栋3单元101室" border="none"></u--input>
...@@ -135,6 +137,84 @@ export default { ...@@ -135,6 +137,84 @@ export default {
uni.$u.toast('请正确填写信息') uni.$u.toast('请正确填写信息')
}) })
}, },
// 用户授权
getAuthorize() {
const _this = this
uni.authorize({
scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
success(res) {
_this.getLocation()
},
// 授权失败
fail(err) {
uni.showModal({
title: '温馨提示',
content: '无法获取当前位置，请手动开启授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
console.log('打开授权设置定位')
_this.getLocation()
}
},
})
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
},
})
},
// 获取用户的地理位置，
getLocation() {
const _this = this
uni.getLocation({
type: 'wgs84',
altitude: true,
success(res) {
//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
_this.loadCity(res.longitude, res.latitude)
},
fail() {
console.log('拒绝获取地理位置')
}
})
},
// 经纬度转具体城市
// 1）需要用到高德地图的逆地理编码
// 2）需要当前地理位置的经纬度
// 3）小程序的key值
loadCity(longitude, latitude) {
const that = this
uni.request({
header: {
'Content-Type': 'application/text',
},
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
longitude +
',' +
latitude +
'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
success(res) {
console.log(res);
if (res.statusCode === 200) {
if (res.data.status === '1') {
let addressInfo = res.data
//详细地址
let detailInfo = addressInfo.regeocode.formatted_address
that.model1.addressInfo.address = detailInfo
}
} else {
console.log('获取信息失败，请重试！')
}
},
})
},
}, },
onLoad(option) { onLoad(option) {
this.id = option.id this.id = option.id
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment