[小程序]定位功能实现

第一步:首先要认识三个小程序的 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…

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…

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

数据链路层 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系统,可以创建用户,存钱,转账&…

Python 二维平面Delaunay三角网建立

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

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

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

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

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

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…

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

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

华为设备vlan下配置MSTP,STP选举

核心代码,不同实例,承载不同流量,为每个实例设置一个根网桥达到分流的效果 stp region-config //进入stp区域的设置 region-name R1 //区域命名为R1 instance 1 vlan 10 …

专业课140+总分410+电子科技大学858信号与系统考研经验,电子信息通信

我的初试备考从4月末,持续到初试前,这中间没有中断。 我是二战考生,准备的稍微晚一些,如果是一战考生,建议在2、3月份开始。 总的时间分配上,是数学>专业课>英语>政治,虽然大家可支配…

DP读书:《openEuler操作系统》(八)TCP、UDP与跨机器通讯

10min速通TCP与UDP 2024 DP读书计算机网络简介TCP/IP协议栈A. 物理层1.信号及信道传递2.信号调制与调解3.信道的复用 B. 数据链路层1.封装成帧2.透明传输3.差错控制 C. 网络层1.IP2.ARP3.路由选择协议 D. 传输层1.端口号2.3.UDP 2024 DP读书 第八章 跨机器通讯 在第六章之中&a…

ES的索引库操作

索引库操作 索引库就类似数据库表,mapping映射就类似表的结构。 我们要向es中存储数据,必须先创建“库”和“表”。 1.mapping映射属性 mapping是对索引库中文档的约束,常见的mapping属性包括: type:字段数据类型&a…

java数据结构与算法:单链表 SinglyLinkedList

单链表 SinglyLinkedList 创建实现类并实现方法 package com.lhs;public class SinglyLinkedList<E> implements List<E>{// 头节点private Node<E> first;// 尾节点private Node<E> last;// 节点数量private int size;public static class Node<…

微信小程序开发学习笔记《12》下拉刷新事件

微信小程序开发学习笔记《12》下拉刷新事件 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读官方文档 一、什么是下拉刷新 下拉刷新是移动端的专有名词&#xff0c;指的是通过手指在屏幕上的下拉滑动操作&#xff0c;…

php反序列化漏洞基础

一、序列化 serialize(): 序列化是将对象或类转换为字符串的过程,以便在程序运行过程中对其进行持久化存储或传输的操作。在PHP中,序列化主要用于将类对象或数组转换成字节流的形式,以便于存储在磁盘或传输到其他系统。 通过序列化,可以将对象或类转换成一串字符串,然后可…