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>


相关文章
uniapp开发app获取当前位置的经纬度
uniapp开发app获取当前位置的经纬度
362 0
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
465 0
|
小程序 定位技术
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
721 0
|
3月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
75 1
|
3月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
309 0
|
5月前
|
小程序
微信小程序监听页面滚动位置
微信小程序监听页面滚动位置
568 0
|
11月前
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
310 0
|
5月前
|
小程序
uni-app微信小程序隐藏左上角返回按钮
uni-app微信小程序隐藏左上角返回按钮
573 1
|
5月前
|
Java 定位技术 Android开发
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
【Android App】集成腾讯地图显示位置和地图面板讲解及实战(附源码和演示 超详细必看)
353 1
|
5月前
|
移动开发 小程序 前端开发
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
关于uniapp回到顶部-支持小程序与H5 + 图片压缩