本文主要是介绍uniapp使用uni.chooseLocation()打开地图选择位置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
使用uni.chooseLocation()打开地址选择位置:
实现效果图
:
1、在Uniapp源码视图进行设置
添加这个属性:"requiredPrivateInfos":["chooseLocation"]
uni.chooseLocation成功返回的参数
2、在页面使用地图选择
</template><view class="location_box"><view class="location_box_icon"><image src="../../static/weizhi.svg" mode=""></image><view style="margin-top: 15px;">{{current_name}}</view></view><view class="current_location" @click="current"><view style="margin-top: 15px;width: 100%;">当前位置</view><image src=" ../../static/shuxin.svg" mode=""></image></view></view>
<template><script>export default {data() {return {current_name: '',}},onLoad() {},methods: { current() {uni.chooseLocation({success: (res) => {console.log('位置名称:' + res.name);console.log('详细地址:' + res.address);console.log('纬度:' + res.latitude);console.log('经度:' + res.longitude);this.current_name = res.name}});}}
}
</script><style scoped>.location_box {width: 90%;height: 60px;margin-left: 3%;margin-top: 10px;display: flex;justify-content: space-between;background-color: #F5F5F5;}.location_box_icon {width: 65%;height: 50px;display: flex;}.location_box_icon image {width: 12%;height: 50px;}.current_location {width: 30%;height: 50px;display: flex;}.current_location image {width: 35%;height: 50px;margin-left: 10%;}</style>
这篇关于uniapp使用uni.chooseLocation()打开地图选择位置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!