目录
二、获取用户收货地址 [uni.chooseAddress]
三、获取当前的地理位置、速度 [uni.getLocation]
四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]
一、 注意事项： manifest.json需增加配置
"mp-weixin": {
"requiredPrivateInfos": ["chooseLocation", "getLocation", "getLocation","chooseAddress"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
},二、获取用户收货地址 [uni.chooseAddress]
API接口参考：https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress
1、效果图
2、vue页面代码
<template>
<view>
<u-icon size="12" name="arrow-down" label="选择地址" labelPos="left"
@click="citySelect()"></u-icon>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
citySelect(){
uni.chooseAddress({
type: 'wgs84',
success: (res) => {
console.log(res)
},
fail: (err) => {
console.error('获取位置失败：', err);
}
})
},
}
};
</script>
<style>
page {
height: 100%;
background: white;
}
.homePage {
padding-bottom: 5px;
}
</style>三、获取当前的地理位置、速度 [uni.getLocation]
API接口参考：https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
1、调用方式
uni.getLocation({
type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
success: (res) => {
console.log(res)
},
fail: (err) => {
console.error('获取位置失败：', err);
}
});2、res结果
{
"latitude": 29.56471,
"longitude": 106.55073,
"speed": -1,
"accuracy": 65,
"verticalAccuracy": 65,
"horizontalAccuracy": 65,
"errMsg": "getLocation:ok"
}四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]
API接口参考：
https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation
https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation
1、效果图
2、子组件代码
<template>
<view>
<map id="map" longitude="116.397470" latitude="39.908823" scale="14" @tap="chooseLocation"
style="width: 100%; height: 300px;"></map>
<!-- <view v-if="location">
位置：{{ location.address }}
<button @click="navigateTo">导航到这里</button>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
location: null
}
},
methods: {
chooseLocation() {
const that = this;
uni.chooseLocation({
success(res) {
that.location = {
latitude: res.latitude,
longitude: res.longitude,
address: res.address,
};
that.callParent();
},
fail(err) {
console.log('选择位置失败：', err);
},
});
},
callParent() {
//传值回父组件
this.$emit('parentMethod', this.location);
},
navigateTo() {
if (this.location) {
uni.openLocation({
latitude: this.location.latitude,
longitude: this.location.longitude,
address: this.location.address,
success() {
console.log('导航成功');
},
fail(err) {
console.log('导航失败：', err);
},
});
}
},
}
}
</script>
<style>
</style>3、父组件使用子组件
<template>
<view class="box">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form labelWidth="120" labelPosition="top" labelAlign="left" :labelStyle="{'fontSize':'14px'}" :model="form"
<u-form-item label="位置信息" prop="location">
<view>{{location.address}}</view>
<map-select @parentMethod="callLocation"></map-select>
</u-form-item>
</u--form>
</view>
</template>
<script>
import MapSelect from "@/pages/assembly/MapSelect.vue";
export default {
components: {
'map-select': MapSelect
},
data() {
return {
form:{},
location:{}
};
},
methods: {
callLocation(location){
console.log("父组件print:",location);
this.location=location;
}
},
};
</script>
<style>
page {
height: 100%;
background: white;
}
.box {
margin: 10px 20px 20px 20px;
}
.confirmButton {
padding-bottom: 50px;
}
.u-form-item__body__left.data-v-5e7216f1 {
position: relative;
}
.u-form-item__body__left__content.data-v-5e7216f1 {
position: absolute;
top: 0;
}
</style>4、res结果
{
"errMsg": "chooseLocation:ok",
"name": "雾都宾馆",
"address": "重庆市渝中区上曾家岩24号",
"latitude": 29.565184,
"longitude": 106.551766
}