当前位置：首页 > news >正文

#跟着若城学鸿蒙# web篇-获取定位

news 来源：原创 2025/6/20 17:11:48

前言

在业务中，某些网页上需要获取用户的地理位置，然后按照用户搜索的兴趣点与用户的距离远近进行排序，这就需要h5能够获取到用户的位置。

由于 web 组件基于Chromium M114 版本开发，前端就可以使用navigator.geolocation.getCurrentPosition来获取位置信息。

实现

定位权限

首先需要在配置文件中声明定位权限

在模块中module.json5文件中配置一下权限

      {"name" : "ohos.permission.APPROXIMATELY_LOCATION","reason": "$string:user_grant_approximately_location_reason","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name" : "ohos.permission.LOCATION","reason": "$string:user_grant_approximately_location_reason","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name" : "ohos.permission.LOCATION_IN_BACKGROUND","reason": "$string:user_grant_approximately_location_reason","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}}

这里我们配置了大致定位、精确定位和后台定位

前端页面

<!DOCTYPE html>
<html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位置信息</title>
</head><body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button><script>function getLocation() {console.error("获取位置");if (navigator.geolocation) {console.error("可以使用 ");const options = {enableHighAccuracy: true,  // 是否启用高精度模式timeout: 5000,           // 超时时间（毫秒）maximumAge: 0            // 缓存位置的最大年龄（毫秒）};navigator.geolocation.getCurrentPosition((position) => {console.error("获取到定位结果");console.error("Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude);// 在这里处理获取到的位置信息var locationInfo = document.getElementById("locationInfo");locationInfo.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;},(error) => {console.error("获取位置失败:",error);// 在这里处理错误情况},options);} else {console.error("不可以使用");}}</script>

web 组件

在 web 组件中，我们需要先允许访问位置信息，然后在收到前端请求时，进行处理

          //定位.geolocationAccess(true).onGeolocationShow((event)=>{AlertDialog.show({title: '位置权限请求',message: '是否允许获取位置信息',primaryButton: {value: '拒绝',action: () => {if (event) {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}}},secondaryButton: {value: '允许',action: () => {if (event) {let context = getContext(this) as common.UIAbilityContext;let atManager = abilityAccessCtrl.createAtManager();atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION","ohos.permission.LOCATION"]).then((data) => {event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求}).catch((error: BusinessError) => {console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);})}}},cancel: () => {if (event) {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}}})})

当点击页面中的获取位置时，会回调 web 的onGeolocationShow,这时候按照规范，需要先弹窗向用户解释为什么需要这个权限。当用户点击允许时，我们再去申请权限权限。当用户允许权限后，调用event.geolocation.invoke(event.origin, true, false); 通知前端可以定位了。当用户拒绝时回调event.geolocation.invoke(event.origin, false, false);通知前端没有权限。

这样我们就完成了定位请求。下面放一下效果图

#跟着若城学鸿蒙# web篇-获取定位

前言在业务中，某些网页上需要获取用户的地理位置，然后按照用户搜索的兴趣点与用户的距离远近进行排序，这就需要h5能够获取到用户的位置。由于 web 组件基于Chromium M114 版本开发，前端就可以使用navigator.geolocation.getC…...

编程日记 2025/6/20 17:11:48

前端批量下载文件打包为zip

多文件需要一次性下载为zip文件这是近期遇到的一个需求，本身是多文件上传的，下载时单个下载太慢又繁杂，用户希望能一次性批量下载，就选择了jszip import axios from "axios" import JSZip from "jszip" im…...

编程日记 2025/6/4 10:16:46

Vue百日学习计划Day9-15天详细计划-Gemini版

重要提示： 番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。灵活性： JavaScript 的概念较多，尤其是 this、原型链、闭包和异步编程，可能需要更多…...

编程日记 2025/6/20 16:20:20

MySQL8.x新特性：与mysql5.x的版本区别

MySQL8.x新特性 1.与mysql5.x的区别：MySQL8.x新特性：与mysql5.x的版本区别-CSDN博客 2.窗口函数（Window Functions）：MySQL8.x新特性：窗口函数（Window Functions）-CSDN博客引言 …...

编程日记 2025/6/20 15:50:44

RabbitMQ 消息模式实战：从简单队列到复杂路由（三）

精准投递：路由模式路由模式详解路由模式是 RabbitMQ 中一种功能强大且灵活的消息传递模式，它在发布订阅模式的基础上，引入了路由键（Routing Key）的概念，实现了消息的精准路由和分发。在路由模式中&…...

编程日记 2025/6/1 8:08:54

STM32 定时器主从模式配置解析

STM32 定时器主从模式配置解析下面这两行代码是配置STM32定时器主从模式的关键设置代码功能解析 TIM_SelectInputTrigger(TIM3, TIM_TS_TI2FP2); // 选择从模式输出的触发源 TIM_SelectSlaveMode(TIM3, TIM_SlaveMode_Reset); // 选择从模式1. TIM_SelectInputTrigger(T…...

编程日记 2025/6/20 15:22:09

Leetcode76覆盖最小子串

覆盖最小子串代码来自b站左程云 class Solution {public String minWindow(String str, String tar) {char[] s str.toCharArray();char[] t tar.toCharArray();int[] cnt new int[256];for (char cha : t) { cnt[cha]--;}int len Integer.MAX_VALUE;int debt t.length…...

编程日记 2025/6/20 15:46:39

Perl语言深度考查：从文本处理到正则表达式的全面掌握

阅读原文前言：为什么Perl依然值得学习？ "这个脚本用Perl写只需要5分钟！"——在当今Python大行其道的时代，你依然能在不少企业的运维部门听到这样的对话。Perl作为一门有着30多年历史的语言，凭借其强大的文…...

编程日记 2025/6/20 15:25:29

idea中Lombok失效的解决方案

Lombok 是一个 Java 库，旨在通过注解简化 Java 代码的编写，减少样板代码，提高开发效率。它通过自动生成常见的代码（如 getter、setter、构造函数等）来减少开发者的手动编码工作。一般Lombok失效有四步排查方案&#…...

编程日记 2025/6/20 15:21:03

【LeetCode 热题 100】动态规划系列

📁 70. 爬楼梯状态标识：爬到第i层楼梯时，有多少种方法。状态转移方程：dp[i] dp[i-1] dp[i-2]，表示从走一步和走两步的方式。初始化：dp[1] 1 , dp[2] 2。返回值：dp[n]，即走到…...

编程日记 2025/6/20 15:45:21

刷leetcodehot100返航版--双指针5/16

for (int i 0, j 0; i < n; i ) { while (j < i && check(i, j)) j ; // 具体问题的逻辑 } 常见问题分类： (1) 对于一个序列，用两个指针维护一段区间 (2) 对于两个序列，维护某种次序，比如归并排序中…...

编程日记 2025/6/20 15:20:08

DAY24元组和OS模块

元组元组的特点： 有序，可以重复，这一点和列表一样元组中的元素不能修改，这一点非常重要，深度学习场景中很多参数、形状定义好了确保后续不能被修改。很多流行的 ML/DL 库（如 TensorFlow, PyTorch, Num…...

编程日记 2025/6/20 16:05:41

CSS：三大特性

文章目录一、层叠性二、继承性三、优先级一、层叠性二、继承性可以在MDN网站上查看属性是否可以被继承例如color 三、优先级...

编程日记 2025/6/20 16:27:20

Cross-Site Scripting（XSS）

1. XSS介绍跨站脚本攻击（Cross-Site Scripting）简称XSS，人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩…...

编程日记 2025/5/27 5:26:51

掌握HTML文件上传：从基础到高级技巧

HTML中input标签的上传文件功能详解一、基础概念 1. 文件上传的基本原理在Web开发中，文件上传是指将本地计算机中的文件（如图片、文档、视频等）传输到服务器的过程。HTML中的<input type"file">标签是实现这一功能的基础…...

编程日记 2025/5/29 9:20:57

WebRTC中的几个Channel

一、我指的是谁？ 以视频为例，常见的有：MediaChannel、VideoMediaChannel、WebRtcVideoChannel、BaseChannel、VideoChannel，那么，为什么要这么多Channel，只写一个叫做SuperChannel行不行（很多程…...

编程日记 2025/5/29 17:02:00

【设计模式】- 行为型模式1

模板方法模式定义了一个操作中的算法骨架，将算法的一些步骤推迟到子类，使得子类可以不改变该算法结构的情况下重定义该算法的某些步骤【主要角色】： 抽象类：给出一个算法的轮廓和骨架（包括一个模板方法和若干基…...

编程日记 2025/5/18 8:45:57

容器化-k8s-使用和部署

一、K8s 使用 1、基本概念集群：由 master 节点和多个 slaver 节点组成，是 K8s 的运行基础。节点：可以是物理机或虚拟机，是 K8s 集群的工作单元，运行容器化应用。Pod： K8s 中最小的部署单元，一个 Pod 可以包含一个或多个紧密相关的容器，这些容器共享网络和存储资源。…...

编程日记 2025/5/28 7:56:32

黑马k8s（九）

1.Pod-生命周期概述 2.Pod生命周期-创建和终止 3.Pod生命周期-初始化容器...

编程日记 2025/5/28 14:47:32

Android trace中CPU的RenderThread与GPU

Android trace中CPU的RenderThread与GPU RenderThread是系统的GPU绘制线程，GPU渲染就是通常所谓的硬件加速，如果应用关闭硬件加速，就没有了RenderThread，只有UI Thread，即Android主线程。 Android GPU渲染SurfaceFlin…...

编程日记 2025/5/18 10:17:14

测试工程师如何学会Kubernetes(k8s)容器知识

Kubernetes(K8s)作为云原生时代的关键技术之一，对于运维工程师、开发工程师以及测试工程师来说，都是一门需要掌握的重要技术。作为一名软件测试工程师，学习Kubernetes是一个有助于提升自动化测试、容器化测试以及云原生应用测试能力的重要过程…...

编程日记 2025/5/29 9:51:45

接触感知钳位电路分析

以下是NG板接触感知电路的原理图。两极分别为P3和P4S，电压值P4S < P3。电路结构分两部分，第一部分对输入电压进行分压钳位。后级电路使用LM113比较器芯片进行电压比较，输出ST接触感知信号。钳位电路输出特性分析输出电压变化趋势&a…...

编程日记 2025/5/18 9:08:21

码蹄集——圆包含

MT1181 圆包含输入2个圆的圆心的坐标值（x，y）和半径，判断断一个圆是否完全包含另一个圆，输出YES或者NO。另：内切不算做完全包含。格式输入格式：输入整型，空格分隔。每行输入一组…...

编程日记 2025/6/1 12:40:17

ConcurrentSkipListMap的深入学习

目录 1、介绍 1.1、线程安全 1.2、有序性 1.3、跳表数据结构 1.4、API 提供的功能 1.5、高效性 1.6、应用场景 2、数据结构 2.1、跳表（Skip List） 2.2、节点类型： 1.Node 2.Index 3.HeadIndex 2.3、特点 3、选择层级 3.1、随…...

编程日记 2025/5/30 0:08:41

ProfibusDP主站转modbusTCP网关接DP从站网关通讯案例

ProfibusDP主站转modbusTCP网关接DP从站网关通讯案例在工业自动化领域，Profibus DP和Modbus TCP是两种常见的通信协议。Profibus DP广泛应用于过程自动化、工厂自动化等场景，而Modbus TCP则常见于楼宇自动化、能源管理等领域。由于设备和系统之间往往存…...

编程日记 2025/5/22 8:21:53

第一次做逆向

题目来源：ctf.show 1、下载附件，发现一个exe和一个txt文件看看病毒加没加壳，发现没加那就直接放IDA 放到IDA找到main主函数，按F5反编译工具就把他还原成类似C语言的代码然后我们看逻辑，将flag.txt文件的内容进行加…...

编程日记 2025/5/29 12:37:43

【项目】自主实现HTTP服务器：从Socket到CGI全流程解析

00 引言在构建高效、可扩展的网络应用时，理解HTTP服务器的底层原理是一项必不可少的技能。现代浏览器与移动应用大量依赖HTTP协议完成前后端通信，而这一过程的背后，是由网络套接字驱动的请求解析、响应构建、数据传输等一系列机制所支撑…...

编程日记 2025/5/24 23:03:38

AI最新资讯，GPT4.1加入网页端、Claude 3.7 Sonnet携“极限推理”发布在即

目录一、GPT4.1加入网页端二、Claude 3.7 Sonnet携“极限推理”发布在即三、这项功能的关键特点1、双模式操作2、可视化思考过程3、可控的思考预算4、性能提升四、Claude制作SVG图像1、Prompt提示词模板2、demo：技术路线图**Prompt提示词：**3、甘特图4…...

编程日记 2025/5/22 11:02:15

Android 中使用通知(Kotlin 版)

1. 前置条件 Android Studio：确保使用最新版本（2023.3.1）目标 API：最低 API 21，兼容 Android 8.0（渠道）和 13（权限）依赖库：使用 WorkManager 和 Notificatio…...

编程日记 2025/5/19 8:28:42

在 Kotlin 中，什么是解构，如何使用？

在 Kotlin 中，解构是一种语法糖，允许将一个对象分解为多个独立的变量。这种特性可以让代码更简洁、易读，尤其适用于处理数据类、集合（如 Pair、Map）或其他结构化数据。 1 解构的核心概念解构通过定义 componentN()…...

编程日记 2025/5/20 4:27:43

apisix透传客户端真实IP（real-ip插件）

文章目录 apisix透传客户端真实IP需求和背景apisix real-ip插件为什么需要 trusted_addresses？安全架构的最佳实践示例场景apisix界面配置 apisix透传客户端真实IP 需求和背景当 APISIX 前端有其他反向代理（如 Nginx、HAProxy、云厂商的 LB&#xff…...

编程日记 2025/5/31 4:08:53

初学者如何用 Python 写第一个爬虫？

初学者如何用 Python 写第一个爬虫？ 一、爬虫的基本概念 （一）爬虫的定义爬虫，英文名为 Web Crawler，也被叫做网络蜘蛛、网络机器人。想象一下，有一个勤劳的小蜘蛛，在互联网这个巨大的蜘蛛网中…...

编程日记 2025/5/26 9:54:16

基于MNIST数据集的手写数字识别（CNN）

目录一，模型训练 1.1 数据集介绍 1.2 CNN模型层结构 1.3 定义CNN模型 1.4 神经网络的前向传播过程 1.5 数据预处理 1.6 加载数据 1.7 初始化 1.8 模型训练过程 1.9 保存模型二，模型测试 2.1 定义与训练时相同的CNN模型架构 2.2 图像的预处…...

编程日记 2025/5/28 4:05:54

QT6 源（103）篇三：阅读与注释 QPlainTextEdit，给出源代码

（10）关于文本处理的内容很多，来不及全面阅读、思考与整理。先给出类的继承图： （11）本源代码来自于头文件 qplaintextedit . h ： #ifndef QPLAINTEXTEDIT_H #define QPLAINTEXTEDIT_H#include &…...

编程日记 2025/5/22 22:53:11

yocto5.2开发任务手册-7 升级配方

此文为机器辅助翻译，仅供个人学习使用，如有翻译不当之处欢迎指正 7 升级配方随着时间的推移，上游开发者会为图层配方构建的软件发布新版本。建议使配方保持与上游版本发布同步更新。虽然有多种升级配方的方法，但您可能需要先…...

编程日记 2025/5/29 17:53:46

LangPDF: Empowering Your PDFs with Intelligent Language Processing

LangPDF: Empowering Your PDFs with Intelligent Language Processing Unlock Global Communication: AI-Powered PDF Translation and Beyond In an interconnected world, seamless multilingual document management is not just an advantage—it’s a necessity. LangP…...

编程日记 2025/5/22 8:53:37

前言

实现

定位权限

前端页面

web 组件

这样我们就完成了定位请求。下面放一下效果图

相关文章：