微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法

最新推荐文章于 2023-05-10 09:52:00 发布
最新推荐文章于 2023-05-10 09:52:00 发布
阅读量1.8k 收藏
点赞数 2
分类专栏： web 文章标签： 微信 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YangtzeX/article/details/120337426
版权

微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法

遇到的问题:

第一个坑: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息,选择第一个时报错;错误信息如下

在这里插入图片描述

在这里插入图片描述

解决方案: 当选择没有返回省份的地址时,根据返回的经纬度去获取地址,将获取的地址再次执行一次,就能成功拿到或者切换地址了

源代码(报错的代码)
function chooseLocation(){
        wx.chooseLocation({
            success:function(res){
                console.log('地址信息: ', res);
                var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;  
                var REGION_PROVINCE=[];  
                var addressBean = {  
                  REGION_PROVINCE:null,  
                  REGION_COUNTRY:null,  
                  REGION_CITY:null,  
                  ADDRESS:null};  
                function regexAddressBean(address, addressBean){
                    regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;  
                    var addxress = regex.exec(address);  
                    addressBean.REGION_CITY=addxress[1];  
                    addressBean.REGION_COUNTRY=addxress[2];  
                    addressBean.ADDRESS=addxress[3]+"("+res.name+")"; 
                }
                if(!(REGION_PROVINCE = regex.exec(res.address))){  
                  regex = /^(.*?(省|自治区))(.*?)$/;  
                  REGION_PROVINCE = regex.exec(res.address);
                    console.log('是否有省份: ', REGION_PROVINCE);
                  if (!REGION_PROVINCE) { // 没有省份和自治州时,根据返回的经纬度获取新地址
                    const latitude = res.latitude
                    const longitude = res.longitude
                    let location={
                        latitude,
                        longitude
                    }
                    qmapsdk.reverseGeocoder({
                        location:location,
                        sig:"0P5KMyVUQyftieppAGHhti5Ul5T5dqC",
                        success: function(res) {
                            regex = /^(.*?(省|自治区))(.*?)$/;  
                            REGION_PROVINCE = regex.exec(res.result.address);
                            addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                            regexAddressBean(REGION_PROVINCE[3],addressBean); 
                        },
                        fail: function(error) {
                            wx.hideLoading()
                            wx.showToast({
                                title: "地址解析失败，请稍后重试",
                                icon: 'none',
                                duration: 5000,
                            });
                        }
                      })
                  } else {
                      addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                      regexAddressBean(REGION_PROVINCE[3],addressBean);  
                  }
                } else {  
                  addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                  regexAddressBean(res.address, addressBean);  
                } 
                setTimeout(() => {
                    callBack(addressBean)
                }, 800);
            },
            fail:function(){

            }
        })
    }
修改后的代码
function chooseLocation(){
        wx.chooseLocation({
            success:function(res){
                console.log('地址信息: ', res);
                var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;  
                var REGION_PROVINCE=[];  
                var addressBean = {  
                  REGION_PROVINCE:null,  
                  REGION_COUNTRY:null,  
                  REGION_CITY:null,  
                  ADDRESS:null};  
                function regexAddressBean(address, addressBean){
                    regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;  
                    var addxress = regex.exec(address);  
                    addressBean.REGION_CITY=addxress[1];  
                    addressBean.REGION_COUNTRY=addxress[2];  
                    addressBean.ADDRESS=addxress[3]+"("+res.name+")"; 
                }
                if(!(REGION_PROVINCE = regex.exec(res.address))){  
                  regex = /^(.*?(省|自治区))(.*?)$/;  
                  REGION_PROVINCE = regex.exec(res.address);
                    console.log('是否有省份: ', REGION_PROVINCE);
                  if (!REGION_PROVINCE) { // 没有省份和自治州时,根据返回的经纬度获取新地址
                    const latitude = res.latitude
                    const longitude = res.longitude
                    let location={
                        latitude,
                        longitude
                    }
                    qmapsdk.reverseGeocoder({
                        location:location,
                        sig:"0P5KMyVUQyftieppAGHhti5Ul5T5dqC",
                        success: function(res) {
                            regex = /^(.*?(省|自治区))(.*?)$/;  
                            REGION_PROVINCE = regex.exec(res.result.address);
                            addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                            regexAddressBean(REGION_PROVINCE[3],addressBean); 
                        },
                        fail: function(error) {
                            wx.hideLoading()
                            wx.showToast({
                                title: "地址解析失败，请稍后重试",
                                icon: 'none',
                                duration: 5000,
                            });
                        }
                      })
                  } else {
                      addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                      regexAddressBean(REGION_PROVINCE[3],addressBean);  
                  }
                } else {  
                  addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                  regexAddressBean(res.address, addressBean);  
                } 
                setTimeout(() => {
                    callBack(addressBean)
                }, 800);
            },
            fail:function(){

            }
        })
    }
改变之处

在这里插入图片描述

第二个坑: 正则表达式匹配问题;当输入的城市没有区时,也会报错,例如输入东莞市

在这里插入图片描述

报错位置:

在这里插入图片描述

修改: 多加一个判断,处理没有匹配到区的情况
两次优化后的最终代码
function chooseLocation() {
    wx.chooseLocation({
      success: function(res) {
        var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
        var REGION_PROVINCE = [];
        var addxress = '' // 匹配市区县
        var addressBean = {
          REGION_PROVINCE: null,
          REGION_COUNTRY: null,
          REGION_CITY: null,
          ADDRESS: null};
        function regexAddressBean(address, addressBean) {
            console.log('address: ', address);
            regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
            addxress = regex.exec(address);   
            if (!addxress) { // 没有区县的情况,直接匹配地址
               regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[道镇]|.*?管委会|.*?生态园)(.*?)$/g; // 东莞市的区是以 道/镇/管委会/生态园
                addxress = regex.exec(address); 
                console.log('addxress: ', addxress);
                addressBean.REGION_CITY = addxress[1];  
                addressBean.REGION_COUNTRY = addxress[2];  
                addressBean.ADDRESS = addxress[3]+"("+res.name+")"
            } else {
                addressBean.REGION_CITY = addxress[1];  
                addressBean.REGION_COUNTRY = addxress[2];  
                addressBean.ADDRESS = addxress[3]+"("+res.name+")"; 
            }
        }
        if (!(REGION_PROVINCE = regex.exec(res.address))) {  
            regex = /^(.*?(省|自治区))(.*?)$/;  
            REGION_PROVINCE = regex.exec(res.address);
            if (!REGION_PROVINCE) { // 没有省份和自治州时,根据返回的经纬度获取新地址
              console.log('没有省份:', REGION_PROVINCE)
              const latitude = res.latitude
              const longitude = res.longitude
            let location={
                latitude,
                longitude
            }
            qmapsdk.reverseGeocoder({
                location:location,
                sig:"0P5KMyVUQyftieppAGHhti5Ul5T5dqC",
                success: function(res) {
                    regex = /^(.*?(省|自治区))(.*?)$/;  
                    REGION_PROVINCE = regex.exec(res.result.address);
                    addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                    regexAddressBean(REGION_PROVINCE[3],addressBean); 
                },
                fail: function(error) {
                    wx.hideLoading()
                    wx.showToast({
                        title: "地址解析失败，请稍后重试",
                        icon: 'none',
                        duration: 5000,
                    });
                }
                })
            } else {
                console.log('有省份:', REGION_PROVINCE)
                addressBean.REGION_PROVINCE= REGION_PROVINCE[1];  
                regexAddressBean(REGION_PROVINCE[3],addressBean);  
            }
        } else {
          addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
          regexAddressBean(res.address, addressBean);
        }
        setTimeout(() => {
          callBack(addressBean);
        }, 800);
      },
      fail: function() {

      }
    });
  }
改变之处

在这里插入图片描述

以上代码是封装在公共文件中的代码
页面中引用
js:
/**
  * 打开定位
  */
  import tools from "../../tools/tools.js";
  methods: {
  	openLocation() {
	     let that = this;
	     function callBack(addressBean) {
	       console.log('获取到地址信息:', addressBean.REGION_PROVINCE);
	       let province = addressBean.REGION_PROVINCE;
	       let city = addressBean.REGION_CITY;
	       let area = addressBean.REGION_COUNTRY;
	       let Address = addressBean.ADDRESS;
	       if (province == city) { // 直辖市
	         that.reserveForm.address = `${city}${area}${Address}`
	       } else {
	         that.reserveForm.address = `${province}${city}${area}${Address}`
	       }
	     }
	     openLocation(callBack);
	   },
  }
   wxml: 
   <view class="icon_wrap" @click="openLocation">
     <image class="icon_location" src="./icon/location.png"/>
   </view>
YangtzeX
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
10-17
主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
10-17
主要介绍了微信小程序使用wx.request请求服务器json数据并渲染到页面操作,结合实例形式分析了微信小程序使用wx.request发送网络请求及返回结果渲染到wxml界面相关操作技巧,需要的朋友可以参考下
微信小程序的地图选择及navigateBack传参
weixin_52582672的博客
05-12 147
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ data: { latitude: 0,//地图初次加载时的纬度坐标 longitude: 0, //地图初次加载时的经度坐标 name:"", //选择的位置名称 }, onLoad: function (options) { // 实例化API核心类 qqmapsdk = new QQMapWX({
uniapp小程序打开地图选择位置demo效果wx.chooseLocation（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-21 1270
uniapp小程序打开地图选择位置wx.chooseLocation
uniapp使用uni.chooseLocation()打开地图选择位置
最新发布
用心创作每一篇文章
05-10 1059
使用uni.chooseLocation()打开地址选择位置：添加这个属性："requiredPrivateInfos":["chooseLocation"]
小程序打开地图选择位置wx.chooseLocation 踩坑记
qq_41357391的博客
10-28 1万+
最近需求允许小程序打开地图位置来选择详细地址。貌似wx.chooseLocation()可以实现。很自信的就进行开发。开发完在手机上测试bug来了。苦逼的开启翻阅开发文档。。。 踩坑一： wx.chooseLocation()获取地理位置。授权弹窗是否允许获取地理位置，点击不允许，发现接下来的n此触发都不会在弹起授权弹窗，直接fail。原来不卸载小程序，此时小程序不会再次弹起授权弹窗。了。 解决办...
wx.chooseLocation地图的使用
韩旭不会敲代码吧的博客
10-20 4447
微信小程序wx.chooseLocation地图的使用
微信小程序----打开地图选择位置wx.chooseLocation(Object object)
热门推荐
吾行远方
07-02 1万+
打开地图选择位置wx.chooseLocation(OBJECT) 1、wx.chooseLocation(OBJECT)官方文档及注意事项 wx.chooseLocation(OBJECT)官方文档 2、授权（调用这个接口不授权也可以，不会报错或警告） app.json 与pages同级： "permission": { "scope.userLocation": { "desc"...
使用uni.chooseLocation获取并选择附近的地址
weixin_44694389的博客
11-02 4430
<view class="ReleaseItem"> <view class="ReleaseName">地址</view> <view class="salaryBox" @click="choiceAddress"> <view class="salary">{{region?region:"请选择"}}</view> <u-icon name="arrow-right" color="#999"><.
微信小程序，使用wx.chooseLocation()实现地址搜索功能
qq_57057576的博客
07-19 1683
该api会弹出一个弹窗。
微信小程序出现wx.getLocation再次授权问题的解决方法分析
10-17
主要介绍了微信小程序出现wx.getLocation再次授权问题的解决方法,结合实例形式分析了解决wx.getLocation再次授权问题的相关操作步骤,需要的朋友可以参考下
微信小程序使用wx.getLocation获取定位，点击取消后打开手机设置，重新获取定位
01-19
此篇文章的打卡成功页面https://blog.csdn.net/zxh7770/article/details/107284065#comments_19797656
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
01-03
本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考，具体如下： 今天在做微信小程序的时候，做的商品购买流程。流程是这样的： 商品展示–>商品详情–>下单页面–>下单详情...
微信小程序请求数据的方法(wx.request)
YangtzeX的博客
09-10 1万+
一. 请求之前的准备工作 1. 在pages的根目录下创建js文档 1.1 在js文档中创建公共配置文件(config.js) 1.1.1 在config.js中抽出公共域名 1.1.2 在app.js中引入config.就是文件 ####### 1.1.3 在请求数据的js文件中定义 2.请求的数据是一个对象 2.1 先获取接口(可直接获取接口数据) /** 在请求数据的js文件中(eg:...
小程序获取服务器域名流程
YangtzeX的博客
09-05 2490
1. 登录微信公众号账号 2. 在人员设置出添加运营者管理 3. 再登录小程序账号 4.在小程序中的成员管理中添加项目成员 5.添加成功后在开发设置中添加服务器域名 ...
vue登录功能
YangtzeX的博客
06-22 2132
服务器端 文件(app.js) 基本配置 引入需要的模块 eg: const mysql = require(“mysql”); const express = require(“express”) const cors = require(“cors”) //解决跨域问题 创建连接池:提高效率 var pool = mysql.createPool ({ host: ‘127.0.0.1...
vue中多个事件之间的应用
YangtzeX的博客
08-31 341
Vue脚手架点击添加数字总结 功能: 1. 点击’选择数字弹出小费框,点击对应 数字,对应的数字边框变蓝,表示选中状态;点击确定,弹框消失,‘选择数字变为选中的数字’’;再次点击数字,数字还是为选中状态,点击右上角小叉,弹框隐藏; 2. 点击弹出框里的其他金额,可自定义输入范围内的数字,点击确认后,显示相应的输入的数字(再次点击其他金额,输入框显示上一次输入的金额;如果是可选择的金额,点击其他金额...
中科锐项目总结
YangtzeX的博客
07-18 262
中科锐项目总结 (2019.7.1-2019.7.15) 一.页面结构: 1. images下 存放 图片、css文件、JS文件; 2. 所有页面的头部和尾部共用,要求每个页面的头部和尾部必须一致; 3. 个别页面需要单独添加的js和css放在单独的js和css文件中或者写在body后面,不能写在头部和尾部共用部分里; 4. 除公用部分为,页面剩余的内容需要用一个div包住,以便后台管理操作; 5...
你会用微信小程序封装wx.login方法
02-16
我可以帮助你封装微信小程序的wx.login方法。首先，你需要在微信开发者工具中创建一个小程序，并在需要登录的页面的js文件中引入wx.login方法。接着，在js文件中使用wx.login方法获取用户登录凭证code，并将code发送给后端服务器进行验证。代码示例如下： ``` wx.login({ success: res => { // 获取用户登录凭证code const code = res.code // 将code发送给后端服务器进行验证 wx.request({ url: 'https://example.com/login', data: { code: code }, success: res => { // 登录成功后的操作 }, fail: err => { // 登录失败后的操作 } }) }, fail: err => { // 获取用户登录凭证code失败 } }) ``` 通过以上代码，你可以成功地使用微信小程序封装wx.login方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值