uniapp使用uni.chooseLocation()打开地图选择位置

简介: 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>
相关文章
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
108 1
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
6月前
|
定位技术
uniapp地图标记点的点击事件
uniapp地图标记点的点击事件
185 2
|
6月前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
358 0
|
6月前
|
定位技术
uniapp实现地图电子围栏功能
uniapp实现地图电子围栏功能
266 0
|
6月前
|
JavaScript 前端开发 定位技术
uniapp中地图制作
uniapp中地图制作
75 0
|
6月前
|
小程序 定位技术
uniapp 地图组件(map)的使用总结
uniapp 地图组件(map)的使用总结
583 0
|
定位技术
在uniapp中引入地图
在uniapp中引入地图
81 0
|
定位技术 API 开发工具
uniapp 实现地图距离计算
uniapp 实现地图距离计算
375 0
|
小程序 定位技术
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)