使用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>