微信小程序地址选择wx.chooseLocation

最新推荐文章于 2025-06-16 10:43:43 发布

嫣嫣细语

最新推荐文章于 2025-06-16 10:43:43 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/aaa123aaasqw/article/details/130710784

微信小程序专栏收录该内容

79 篇文章

订阅专栏

文章展示了如何在微信小程序中使用wx.chooseLocationAPI获取用户位置，并结合授权管理实现地图选点功能。同时，文章提到了一个名为susu-mini-tem的组件库，包含各种常见组件如轮播、canvas、地图和Echarts图表等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现效果

在这里插入图片描述

2.实现原理

wx.chooseLocation(Object object) | 微信开放文档

在这里插入图片描述

3.完整代码

susu-mini-tem: 微信小程序封装组件，覆盖常用需求：包括轮播组件（堆叠轮播等）、canvas（圆环、海报、裁图，绘画等）、map、echarts各类图表、css3动画，步骤条、日历组件、自定义tabbar+导航栏、loading加载动画、css渐变、雪碧图、瀑布流、关键词高亮、搜索历史、图片懒加载、节流防抖、索引选择（如城市）、微信拆红包、红包雨、菜单弹出动画、3d云、按钮拖拽、营销组件（九宫格等）

4.部分代码

// pages/choseAddress/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    add:true,
    addressName:'',
    addressDetail:'',
    params:{
      detail:"",
      phone:"",
      contact:"",
    },
    can_click:false,//默认不可点击
  },
  setInput(e){
    let {type}=e.currentTarget.dataset,val = e.detail.value;
    let k = `params.${type}`
    this.setData({
      [k]: val,
    })
    this.inputClick()
  },
  inputClick(){
    let params = this.data.params,status=true,
    {addressName,addressDetail}=this.data;
    if (addressName == '') {
      status = false;
    }
    if (addressDetail == '') {
      status = false;
    }
    if (params.detail == '') {
      status = false;
    }

    if (params.phone == '') {
      status = false;
    }

    if (params.contact == '') {
      status = false;
    }
    this.setData({
      can_click:status
    })
  },

 
  onLoad: function (options) {

  },

 
  onShow: function () {

  },
   //获取用户定位授权，地图选点
   getLocation: function () {
    wx.getSetting({
      success:res=>{
        if(!res.authSetting['scope.userLocation']){
          wx.authorize({ 
            scope: 'scope.userLocation', 
            success:res=>{

            },fail:res=>{
              wx.showModal({
                title: '提示',
                content: '系统需要获取该您当前的定位，请确保您的位置授权已开启',
                showCancel: false,
                success: res=>{
                  if (res.confirm) {
                    wx.openSetting({
    
                    })
                  }
                }
              })
            }
          });
        }
        wx.chooseLocation({ 
          success: res=>{
            console.log(res)
            if(res.address!='' && res.name!=''){
              this.setData({
                addressName: res.name,
                addressDetail: res.address,
                add:false
              })
              this.inputClick()
            }
          }
        })
      }
    })

   },
   //获取微信收货地址
   chooseAddress(){
    // scope.address 通讯地址（已取消授权，可以直接调用对应接口）
    wx.chooseAddress({
      success: (res) => {
        console.log(res)
        this.setData({
          addressName: res.detailInfo,
          addressDetail: res.provinceName+res.cityName+res.countyName,
          'params.contact': res.userName,
          'params.phone': res.telNumber,
          'params.detail':res.detailInfo,
          add: false
        })
        this.inputClick()
      },
    })
  },
  subAddress(){
    let params = this.data.params,  {addressName,addressDetail}=this.data;
    let tmp = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    if(params.phone!=''){
      if (!tmp.test(params.phone)) {
        return wx.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
          duration: 2000,
          mask: true
        });
      }
    }else{
      wx.showToast({
        title: '请输入手机号',
        icon:'none'
      })
    }
    if (addressName == '' || addressDetail == ''){
      wx.showToast({
        title: '请选择收货地址',
        icon:'none'
      })
      return false;
    }
    if (params.detail == '' ){
      wx.showToast({
        title: '请输入详细地址',
        icon:'none'
      })
      return false;
    }
    if (params.contact == '' ){
      wx.showToast({
        title: '请输入联系人',
        icon:'none'
      })
      return false;
    }
    let subParams=params;
    subParams.addressName=addressName;
    subParams.addressDetail=addressDetail
  }
})