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月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
6月前
|
小程序 定位技术
uni-app地图标点展示
uni-app地图标点展示
224 0
uniapp开发app获取当前位置的经纬度
uniapp开发app获取当前位置的经纬度
391 0
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
495 0
|
小程序 定位技术
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
731 0
|
2月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
244 5
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
6月前
|
小程序
微信小程序监听页面滚动位置
微信小程序监听页面滚动位置
636 0
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
333 0