微信小程序-选择和分割打开地图选择位置的信息

一、 前言

废话不多说,单刀直入。

本文要实现的功能是微信小程序中打开地图选择位置,以及将返回的位置信息分割。

例如返回的位置信息是:广东省深圳市龙岗区xxxxx小区

分割后变成:

javascript 复制代码
{
	province: "广东省",
	city: "深圳市",
	area: "龙岗区",
	detail: "xxxxx小区"
}

二、选择位置接口申请以及实现

如果已经申请了接口,可以直接跳过本步骤。

2-1、申请接口

接口名称:wx.chooseLocation

这是接口的实际效果。

前往微信公众平台,申请接口。根据要求填写对应的信息提交就可以了。

2-2、接口的使用

需要在接口审核通过后才可以正常调用,不然无法进行调用。会提示没有权限,如果接口申请通过了,还是提示没有权限,就清除编辑器的缓存后重新编译再试试。

在小程序的app.json中声明接口

javascript 复制代码
    "requiredPrivateInfos": [
        "chooseLocation"
    ]

调用接口以及分割

javascript 复制代码
  async selectAddressTap() {
  // 默认的打开的点
    const latitude_last = 22.54354095458985;
    const longitude_last = 114.05796813964848;
    const chooseRes = await wx
      .chooseLocation({
        latitude: latitude_last,
        longitude: longitude_last,
        scale: 18,
      })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });
    console.log("chooseRes :>> ", chooseRes);
    const errMsg = chooseRes.errMsg;
    
    if (errMsg !== "chooseLocation:ok")  {
    	console.log("chooseRes 选择位置失败 :>> ", chooseRes);
	    return;
    }
    
    const { address, latitude, longitude, name } = chooseRes;
    const { province, city, area, detail } = this.splitAddress(address);
    
 },

  /**
   * 拆分省市区以及具体位置
   * @param {*} address
   */
  splitAddress(address) {
    const reg = /.+?(省|市|自治区|自治州|县|区)/g;
    const list = address.match(reg);
    const province = list[0];
    const city = list[1];
    const area = list[2];
    const detail = address.substring(
      province.length + city.length + area.length
    );
    return {
      province,
      city,
      area,
      detail,
    };
  },

三、分割函数

这是单独的分割函数。

javascript 复制代码
  /**
   * 拆分省市区以及具体位置
   * @param {*} address
   */
  splitAddress(address) {
    const reg = /.+?(省|市|自治区|自治州|县|区)/g;
    const list = address.match(reg);
    const province = list[0];
    const city = list[1];
    const area = list[2];
    const detail = address.substring(
      province.length + city.length + area.length
    );
    return {
      province,
      city,
      area,
      detail,
    };
  },

四、最终的效果

五、结语

最后来一下常规结语:

实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。

👍赞一个!!!

🤩当然,顺带收藏就最好了。

😎欢迎转载,原创不易,转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。


版权声明:本文为CSDN博主「super--Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_44702572/article/details/135113751

相关推荐
云起SAAS9 小时前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名
黑马源码库miui520869 小时前
JAVA购物返利商品比价系统源码支持微信小程序
微信·微信小程序·小程序·1024程序员节
学会煎墙9 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝10 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
2501_9159214312 小时前
iOS混淆与IPA加固全流程(iOS混淆 IPA加固 Ipa Guard实战)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者812 小时前
iOS 26 App 开发阶段性能优化 从多工具协作到数据驱动的实战体系
android·ios·小程序·uni-app·iphone·webview·1024程序员节
2501_9151063212 小时前
深入剖析 iOS 26 系统流畅度,多工具协同监控与性能优化实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
游戏开发爱好者816 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
abigale0317 小时前
开发实战 - ego商城 - 补充:小程序性能优化
小程序·uniapp·小程序分包
说私域18 小时前
开源AI智能客服、AI智能名片与S2B2C商城小程序融合下的商家客服能力提升策略研究
人工智能·小程序