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

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

使用uni.chooseLocation()打开地址选择位置:

实现效果图

301d8eb803534fc58f00632af6a7c965.gif

1、在Uniapp源码视图进行设置

添加这个属性:"requiredPrivateInfos":["chooseLocation"]

61e34a7850c4483e87d8e9c91affe59a.png

uni.chooseLocation成功返回的参数

1125f13c375f4ec5b4d16f3cedc51d59.png

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>


相关文章
|
6天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
6天前
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
10月前
uniapp开发app获取当前位置的经纬度
uniapp开发app获取当前位置的经纬度
222 0
|
10月前
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
140 0
|
小程序 定位技术
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
613 0
|
6天前
|
小程序
微信小程序监听页面滚动位置
微信小程序监听页面滚动位置
158 0
|
6月前
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
147 0
|
6天前
|
小程序
uni-app微信小程序隐藏左上角返回按钮
uni-app微信小程序隐藏左上角返回按钮
204 1
|
6天前
|
移动开发 小程序 前端开发
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
|
6天前
|
Java 定位技术 Android开发
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
95 1