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

news/2024/7/20 3:45:33 标签: 微信小程序, 小程序

一、 前言

废话不多说,单刀直入。
本文要实现的功能是小程序>微信小程序中打开地图选择位置,以及将返回的位置信息分割。
例如返回的位置信息是:广东省深圳市龙岗区xxxxx小区
分割后变成:

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

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

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

2-1、申请接口

接口名称:wx.chooseLocation
这是接口的实际效果。
在这里插入图片描述

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

在这里插入图片描述

2-2、接口的使用

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

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

    "requiredPrivateInfos": [
        "chooseLocation"
    ]

在这里插入图片描述

调用接口以及分割

  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,
    };
  },

三、分割函数

这是单独的分割函数。

  /**
   * 拆分省市区以及具体位置
   * @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


http://www.niftyadmin.cn/n/5276463.html

相关文章

Stable-diffusion-webui本地部署和简要介绍

Stable Diffusion 是一款基于人工智能技术开发的绘画软件,它可以帮助艺术家和设计师快速创建高品质的数字艺术作品。是2022年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像,同时也可以应用于其他任务,如内补绘制、…

SpringBoot学习笔记(二)——SpringBoot测试JUnit5、 SpringBoot 配置、Spring IoC与自动装配

目录 一、Spring Boot测试与JUnit5 1.1、Spring Boot Test介绍1.2、Junit介绍1.3、Spring Boot中使用test 1.3.1、添加依赖1.3.2、注解测试类1.4、常用注解 1.4.1、SpringBootTest1.4.2、Test1.4.3、TestMethodOrder、Order 排序,指定先后顺序1.4.5、Disabled 禁用…

CSS 网页制作-学成在线

1、 准备工作 1.1 项目目录 网站根目录是指存放网站的第一层文件夹,内部包含当前网站的所有素材,包含HTML、CSS、图片、JavaScript等等。 1.2 版心效果 可以发现都是呈现版心居中的效果,但是每次都写一次太麻烦了,可以把版心居中…

Axure RP 8 for Mac/win中文版:打造完美交互式原型设计体验

Axure RP 8,一款引领潮流的交互式原型设计工具,为设计师提供了无限的可能性,让他们能够创造出逼真的原型,从而更好地展示和测试他们的设计。 Axure RP 8拥有丰富的功能和工具,让设计师可以轻松地创建出复杂的交互式原…

ubuntu18 安装 cmake v3.26.1

ubuntu18 安装 cmake v3.26.1 下载 & 解压configure 配置 & 安装 下载 & 解压 版本 v3.26.1 地址直接下载 https://cmake.org/files/v3.26/cmake-3.26.1.tar.gz wget命令下载 wget https://cmake.org/files/v3.26/cmake-3.26.1.tar.gz 解压 tar -xvzf cmake-3.2…

【【迭代七次的CORDIC算法-Verilog实现】】

迭代七次的CORDIC算法-Verilog实现求解正弦余弦函数 COEDIC.v module CORDIC #(parameter DATA_WIDTH 4d8 , // we set data widthparameter PIPELINE 4d8)(input clk ,input …

【ARM 安全系列介绍 3.3 -- DES3 详细介绍并举例应用】

文章目录 DES3 介绍DES3 工作模式DES3 加密过程DES3 应用示例DES3 安全性 DES3 介绍 DES3,全称为 Triple Data Encryption Algorithm (TDEA) 或 Triple DES,是一种对称密钥加密算法。它是对原始 Data Encryption Standard (DES) 加密算法的一种增强&…

用全志R128复刻自平衡赛车机器人,还实现了三种不同的操控方式

经常翻车的朋友们都知道,能在翻车后快速摆正车身的车才是好车。 就像动画《四驱兄弟》中展现的那样,在比赛中需要跟着赛车一起跑圈,而且赛车如果被撞翻还需要重新用手扶正,所浪费的时间非常影响比赛结果。 如果小豪和小烈可以拥有…