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

前言

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

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

实现

定位权限

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

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

javascript 复制代码
      {
        "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"
        }
      }

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

前端页面

html 复制代码
<!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 组件中,我们需要先允许访问位置信息,然后在收到前端请求时,进行处理

typescript 复制代码
          //定位
          .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);通知前端没有权限。

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

相关推荐
zhanshuo1 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo1 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1112 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu18 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉18 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu18 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi200020 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉21 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡1 天前
HarmonyOS学习记录4
学习·华为·harmonyos