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

前言

在业务中，某些网页上需要获取用户的地理位置，然后按照用户搜索的兴趣点与用户的距离远近进行排序，这就需要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);通知前端没有权限。

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