#跟着若城学鸿蒙# 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);通知前端没有权限。

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

相关推荐
Georgewu7 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos
Georgewu7 小时前
【HarmonyOS】Web 组件的 PDF 文档预览功能详解
harmonyos
Chen--Xing8 小时前
第一届OpenHarmonyCTF--Crypto--WriteUp
网络安全·密码学·harmonyos
HarmonyOS_SDK10 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会10 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
周胡杰13 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶14 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶14 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少15 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos