1# 管理位置权限
2
3
4Web组件提供位置权限管理能力。开发者可以通过[onGeolocationShow()](../reference/apis-arkweb/ts-basic-components-web.md#ongeolocationshow)接口对某个网站进行位置权限管理。Web组件根据接口响应结果，决定是否赋予前端页面权限。
5
6- 使用获取设备位置功能前请在module.json5中添加位置相关权限，权限的添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
7
8   ```
9   "requestPermissions":[
10      {
11        "name" : "ohos.permission.LOCATION"
12      },
13      {
14        "name" : "ohos.permission.APPROXIMATELY_LOCATION"
15      },
16      {
17        "name" : "ohos.permission.LOCATION_IN_BACKGROUND"
18      }
19    ]
20   ```
21
22在下面的示例中，用户点击前端页面"获取位置"按钮，Web组件通过弹窗的形式通知应用侧位置权限请求消息。
23
24
25- 前端页面代码。
26
27  ```html
28  <!DOCTYPE html>
29  <html>
30  <body>
31  <p id="locationInfo">位置信息</p>
32  <button onclick="getLocation()">获取位置</button>
33  <script>
34  var locationInfo=document.getElementById("locationInfo");
35  function getLocation(){
36    if (navigator.geolocation) {
37      <!-- 前端页面访问设备地理位置 -->
38      navigator.geolocation.getCurrentPosition(showPosition);
39    }
40  }
41  function showPosition(position){
42    locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
43  }
44  </script>
45  </body>
46  </html>
47  ```
48
49
50- 应用代码。
51
52  ```ts
53  // xxx.ets
54  import { webview } from '@kit.ArkWeb';
55  import { BusinessError } from '@kit.BasicServicesKit';
56  import { abilityAccessCtrl, common } from '@kit.AbilityKit';
57
58  let context = getContext(this) as common.UIAbilityContext;
59  let atManager = abilityAccessCtrl.createAtManager();
60
61  // 向用户请求位置权限设置。
62  atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => {
63    console.info('data:' + JSON.stringify(data));
64    console.info('data permissions:' + data.permissions);
65    console.info('data authResults:' + data.authResults);
66  }).catch((error: BusinessError) => {
67    console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
68  })
69
70  @Entry
71  @Component
72  struct WebComponent {
73    controller: webview.WebviewController = new webview.WebviewController();
74
75    build() {
76      Column() {
77        Web({ src: $rawfile('getLocation.html'), controller: this.controller })
78          .geolocationAccess(true)
79          .onGeolocationShow((event) => { // 地理位置权限申请通知
80            AlertDialog.show({
81              title: '位置权限请求',
82              message: '是否允许获取位置信息',
83              primaryButton: {
84                value: 'cancel',
85                action: () => {
86                  if (event) {
87                    event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
88                  }
89                }
90              },
91              secondaryButton: {
92                value: 'ok',
93                action: () => {
94                  if (event) {
95                    event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求
96                  }
97                }
98              },
99              cancel: () => {
100                if (event) {
101                  event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
102                }
103              }
104            })
105          })
106      }
107    }
108  }
109  ```
110