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>
相关文章
|
15小时前
|
定位技术
uniapp地图标记点的点击事件
uniapp地图标记点的点击事件
15 2
|
15小时前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
77 0
|
15小时前
|
定位技术
uniapp实现地图电子围栏功能
uniapp实现地图电子围栏功能
89 0
|
15小时前
|
JavaScript 前端开发 定位技术
uniapp中地图制作
uniapp中地图制作
38 0
|
15小时前
|
小程序 定位技术
uniapp 地图组件(map)的使用总结
uniapp 地图组件(map)的使用总结
187 0
|
6月前
|
定位技术
在uniapp中引入地图
在uniapp中引入地图
43 0
|
6月前
|
定位技术 API 开发工具
uniapp 实现地图距离计算
uniapp 实现地图距离计算
170 0
|
8月前
|
小程序 定位技术
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
|
10月前
|
开发框架 JavaScript 定位技术
Uniapp - 地图map组件及使用
Uniapp - 地图map组件及使用
869 0
|
15小时前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
9 0

热门文章

最新文章