[小程序]定位功能实现

第一步:首先要认识三个小程序的 api

        wx.chooseLocation wx.getLocation wx.openLocation

        (1).wx.chooseLocation 用于在小程序中选择地理位置。当用户点击选择位置按钮时,小程序会调起地图选择界面,用户可以在地图上选择一个位置,并可以获取到该位置的经纬度、名称、详细地址等信息。

        (2).wx.getLocation 可以获取用户当前的经纬度信息,并可根据需要获取用户的详细地址、速度等附加信息。使用 wx.getLocation API 可以让小程序在需要的情况下获取用户的地理位置信息,然后根据这些信息来进行相关的操作。

        (3).wx.openLocation 用于在地图上打开指定的位置。通过调用 wx.openLocation API,开发者可以传入经度、纬度、名称、地址等参数来指定一个具体的地理位置,然后微信客户端会打开地图并显示该位置。

所以,三者的区别主要在于:

        1. wx.chooseLocation 是用于选择地理位置的,返回用户选择的位置信息。

        2. wx.getLocation 是用于获取用户当前位置的,返回用户当前位置的信息。

        3.wx.openLocation 用于打开地图显示一个指定的位置,而不是获取用户当前位置或选择位置。它用于在小程序中以地图的形式展示一个固定的地理位置,让用户查看或进一步操作。

        

        需要注意的是,使用 wx.getLocation API,wx..getLocation 需要用户在微信公众平台申请权限,并在 app.json 中进行配置,如下:

"requiredPrivateInfos": ["getLocation","chooseLocation"
],

第二步:具体用法

        第一种:打开地图自行选择位置并展示,具体代码如下:

//选择地址
chooseLocation: function () {//保存上下文var that = this;wx.chooseLocation({success: (res) => {//返回自己选择的经度 纬度 和详细地址信息  console.log(res);//就向发布动态一样需要将获取到的地理位置信息存储起来//展示动态直接渲染that.setData({curChooseAddress: res.address,curChooseLatitude: res.latitude,curChooseLongitude: res.longitude})},fail: (res) => {//未授权需要先进行授权//获取授权过的设置wx.getSetting({success: (res) => {console.log(res.authSetting['scope.userLocation']);//如果不存在地址授权 则需要进行确认授权if (!res.authSetting['scope.userLocation']) {//方法一:打开设置进行授权wx.openSetting({success: (res) => {res.authSetting = {"scope.userLocation": true}}})//方法二:弹窗进行授权wx.authorize({scope: 'scope.userLocation',success () {// 用户已经同意小程序使用录音功能,可以再次调用该方法that.chooseLocation()}})}}})}})
}

        第二种:就是获取当前的经纬度,并在地图中显示该位置,具体代码如下:

//打开地图
openMap(){wx.getLocation({type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度success (res) {const latitude = res.latitude   //当前位置的经度和纬度const longitude = res.longitudewx.openLocation({//根据经度和纬度打开地图指定位置 latitude,longitude,scale: 18  //尺寸address: //地址的详细说明name:  //位置名}) }})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/620222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu连接xshell怎么连接

在网上找了好多办法都不行 例如 太久没打开Ubuntu可能输入命令查不到IP地址,解决办法也比较简单,首先第一步 确定自己能不能进入管理员root权限(输入命令su),如果没有的话得重新配置,如下图 这是因为当前Ub…

gin切片表单验证

在Gin中对切片进行表单验证的步骤与对其他类型的字段进行验证类似。以下是一些基本步骤,我们可以根据具体的需求进行调整: 定义结构体: 创建一个结构体,用于存储表单数据。确保结构体中的字段类型与你预期的表单数据类型一致。 使…

【DP】583.两个字符串的删除操作

题目 法1:DP 本质是不带替换操作的最小编辑距离问题!!! class Solution {public int minDistance(String word1, String word2) {int m word1.length() 1, n word2.length() 1;int[][] dp new int[m][n];for (int i 1; i…

LINUX基础第十一章:文件系统与日志服务管理

目录 一.LINUX文件系统 1.inode表和block (1)inode (2)block 2.查看inode号命令 3.Linux系统文件三种主要时间属性 4.磁盘空间还剩余很多但无法继续创建文件 5.inode大小 二.日志 1.日志保存位置 2.日志文件的分类 &am…

Java设计模式-备忘录模式

备忘录模式 一、概述二、结构三、案例实现(一)“白箱”备忘录模式(二)“黑箱”备忘录模式 四、优缺点五、使用场景 一、概述 备忘录模式提供了一种状态恢复的实现机制,使得用户可以方便地回到一个特定的历史步骤&…

超越GPU:TPU能成为接班人吗?

在计算机的世界里,硬件技术的发展一直在快速推进。今天,我们要谈论的就是一种特殊的处理器:TPU,全称是Tensor Processing Unit。在我们开始深入探讨TPU之前,先了解一下两个重要的芯片技术,FPGA和ASIC。 FP…

【Matlab】加载路径下所有指定文件

加载路径下指定文件 想用matlab加载路径下所有指定文件,比如加载一个路径下的所有png图像、txt文件等,网上查了一圈也不是很好用,解决了问题就分享一下。 dir函数 用到了dir函数,Matlab中的dir函数是可以列出指定文件夹中的所有…

【算法题】52. N 皇后 II

题解 n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回 n 皇后问题 不同的解决方案的数量。 示例 1: 输入:n 4 输出:2 解释:如上图所示…

计算机网络 —— 数据链路层

数据链路层 3.1 数据链路层概述 数据链路层把网络层交下来的数据构成帧发送到链路上,以及把收到的帧数据取出并上交给网络层。链路层属于计算机网络的底层。数据链路层使用的信道主要由以下两种类型: 点对点通信。广播通信。 数据链路和帧 链路&…

DHCP详解(配置小实验)

目录 一、DHCP 1、了解DHCP 2、使用DHCP的好处 3、HDCP的分配方式 4、DHCP协议中的报文 5、DHCP的租约过程 6、安装和配置DHCP服务 一、DHCP 1、了解DHCP DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)由Internet工作任务小组设计开发专门用…

java每日一题——ATM系统编写(答案及编程思路)

前言: 基础语句学完,也可以编写一些像样的程序了,现在要做的是多加练习,巩固下知识点,打好基础,daydayup! 题目:模仿银行ATM系统,可以创建用户,存钱,转账&…

2023-12-02 青少年软件编程(C语言)等级考试试卷(五级)解析

2023-12-02 青少年软件编程(C语言)等级考试试卷(五级)解析 一、编程题(共4题,共100分)T1. 书架 John最近买了一个书架用来存放奶牛养殖书籍,但书架很快被存满了,只剩最顶层有空余。 John共有N头奶牛(1 ≤ N ≤ 20,000),每头奶牛有自己的高度Hi(1 ≤ Hi ≤ 10,000),…

Python 二维平面Delaunay三角网建立

目录 一、算法概念二、代码实现三、结果示例根据二维平面内的离散点建立平面三角网。 一、算法概念 三角剖分与Delaunay剖分定义:如何把一个散点集剖分成不均匀的三角形网格,即在给定的平面点集上,生成三角形集合的过程。考虑平面点集P={p1,p2,p3,…,pn},我们希望得到三…

基于Matlab/Simulink开发自动驾驶的解决方案

文章目录 处理自动驾驶数据 仿真自动驾驶场景 设计感知算法 设计规划和控制算法 生成代码和部署算法 集成和测试 参考文献 使用 MATLAB/Simulink开发自动驾驶,能够深入建模真实世界的行为、减少车辆测试并验证嵌入式软件的功能,从而推进自动驾驶感…

QuEra 10,000个物理量子位和100个逻辑量子位的量子计算机2026

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

xtu oj 1334 Least Common Multiple

题目描述 一个集合,任取3个不同的元素,求其最小公倍数中最小的值是多少? 输入 第一行是样例数T(1≤T≤100)。 每个样例的第一行是一个整数n(3≤n≤50),表示集合元素的个数。 每个样例的第二行是n个整数a1,a2,…,an,1≤ai≤106。…

AWS-SAA-C03认证——之基础知识扫盲

文章目录 前言一、Amazon ECS二、 Amazon EKS三、Amazon EC2四、Elastic Beanstalk五、AWS Fargate六、 AWS Lambda (serverless)七、Amazon EBS7.1 EBS生命周期 八、Amazon Elastic File System (EFS) -共享文件系统九、什么是 Amazon S3?9.…

anoconda 安装报错

表现形式:Output folder: D:\anoconda\Lib Extract: _nsis.py Extract: _system_path.py Output folder: D:\anoconda........................ 解决办法: 网址:Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Sour…

Jupyter Notebook之命令行执行Jupyter Notebook文件的命令行实现

命令行 jupyter nbconvert --to notebook --execute yourjuypter.ipynb --output executed.ipynb命令行参数解析 jupyter nbconvert: 这是调用 Jupyter Notebook 的 nbconvert 工具的命令。nbconvert 允许用户将 Jupyter Notebook(.ipynb 文件)转换为…

Django教程|数据统计图表(echarts、highchart)

前言 highchart,国外。 echarts,国内。 本项目集成 hightchart和echarts图表库实现数据统计功能。 包括:折线图,柱状图,饼图和数据集图。 效果图 echats Highcharts 源代码 编写模板(Template&#x…