• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 管理位置权限
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @zhang-yinglie-->
5<!--Designer: @handyohos-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9从API version 9开始，支持Web组件的[GeolocationPermissions](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md)类和[onGeolocationShow](../reference/apis-arkweb/arkts-basic-components-web-events.md#ongeolocationshow)方法对网页进行位置权限管理。更多信息请参见<!--RP1-->[隐私保护说明](../../device-dev/security/security-privacy-protection.md)<!--RP1End-->。
10
11Web组件根据[GeolocationPermissions](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md)类和[onGeolocationShow](../reference/apis-arkweb/arkts-basic-components-web-events.md#ongeolocationshow)方法的响应结果，决定是否赋予前端页面权限。用户可以获取位置信息，以便使用出行导航、天气预报等服务。
12
13## 需要权限
14使用获取位置功能，需在module.json5中配置位置权限。具体添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md#在配置文件中声明权限)。
15
16   ```
17   "requestPermissions":[
18      {
19        "name" : "ohos.permission.LOCATION" // 精准定位
20      },
21      {
22        "name" : "ohos.permission.APPROXIMATELY_LOCATION" // 模糊定位
23      },
24      {
25        "name" : "ohos.permission.LOCATION_IN_BACKGROUND" // 后台定位
26      }
27    ]
28   ```
29
30## 申请位置权限
31在下面的示例中，用户点击前端页面"获取位置"按钮，Web组件通过弹窗通知应用侧位置权限请求消息。
32
33
34- 前端页面代码。
35
36  ```html
37  <!DOCTYPE html>
38  <html lang="en">
39  <head>
40      <meta charset="UTF-8">
41      <meta name="viewport" content="width=device-width, initial-scale=1.0">
42      <title>位置信息</title>
43  </head>
44  <body>
45      <p id="locationInfo">位置信息</p>
46      <button onclick="getLocation()">获取位置</button>
47
48      <script>
49          var locationInfo=document.getElementById("locationInfo");
50          function getLocation(){
51              if (navigator.geolocation) {
52                  // 访问设备地理位置
53                  navigator.geolocation.getCurrentPosition(showPosition);
54              }
55          }
56          function showPosition(position){
57              locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
58          }
59      </script>
60  </body>
61  </html>
62  ```
63
64
65- 应用代码。
66
67  ```ts
68  import { webview } from '@kit.ArkWeb';
69  import { BusinessError } from '@kit.BasicServicesKit';
70  import { abilityAccessCtrl, common } from '@kit.AbilityKit';
71
72  let atManager = abilityAccessCtrl.createAtManager();
73
74  @Entry
75  @Component
76  struct WebComponent {
77    controller: webview.WebviewController = new webview.WebviewController();
78    uiContext: UIContext = this.getUIContext();
79
80    // 组件的声明周期函数，创建组件实例后触发
81    aboutToAppear(): void {
82      let context : Context | undefined = this.uiContext.getHostContext() as common.UIAbilityContext;
83      if (!context) {
84        console.error("context is undefined");
85        return;
86      }
87      // 向用户请求位置权限，对整个应用生效
88      atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => {
89        console.info('data:' + JSON.stringify(data));
90        console.info('data permissions:' + data.permissions);
91        console.info('data authResults:' + data.authResults);
92      }).catch((error: BusinessError) => {
93        console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`);
94      })
95    }
96
97    build() {
98      Column() {
99        // Web组件的geolocationAccess属性默认为true，可以显式配置为false以禁止Web组件获取地理位置信息
100        Web({ src: $rawfile('getLocation.html'), controller: this.controller })
101          .geolocationAccess(true)
102          .onGeolocationShow((event) => {
103            // 位置权限申请通知仅对当前Web组件生效，应用内的其他Web组件不受影响
104            this.uiContext.showAlertDialog({
105              title: '位置权限请求',
106              message: '是否允许获取位置信息',
107              primaryButton: {
108                value: 'cancel',
109                action: () => {
110                  if (event) {
111                    // 不允许此站点位置权限请求
112                    // 注意invoke的第3个参数表示是否记住当前选择，如果传true，则下次不再弹框
113                    event.geolocation.invoke(event.origin, false, false);
114                  }
115                }
116              },
117              secondaryButton: {
118                value: 'ok',
119                action: () => {
120                  if (event) {
121                    // 允许此站点位置权限请求
122                    // 注意invoke的第3个参数表示是否记住当前选择，如果传true，则下次不再弹框
123                    event.geolocation.invoke(event.origin, true, false);
124                  }
125                }
126              },
127              cancel: () => {
128                if (event) {
129                  // 不允许此站点位置权限请求
130                  // 注意invoke的第3个参数表示是否记住当前选择，如果传true，则下次不再弹框
131                  event.geolocation.invoke(event.origin, false, false);
132                }
133              }
134            })
135          })
136      }
137    }
138  }
139  ```
140
141## 管理位置权限
142通过Web组件的[GeolocationPermissions](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md)类管理网页的位置权限，提供了新增（[allowgeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#allowgeolocation)）、查看（[getaccessiblegeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#getaccessiblegeolocation)）和删除（[deleteallgeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#deleteallgeolocation)）网页位置权限的方法。例如查看网页是否已申请位置权限、将网页已申请的位置权限删除。
143
144
145```ts
146import { webview } from '@kit.ArkWeb';
147import { BusinessError } from '@kit.BasicServicesKit';
148
149@Entry
150@Component
151struct WebComponent {
152  controller: webview.WebviewController = new webview.WebviewController();
153  origin: string = "www.example.com";
154
155  build() {
156    Column() {
157      // 新增指定源的位置权限，再次获取位置信息时则不再触发onGeolocationShow的回调
158      Button('allowGeolocation')
159        .onClick(() => {
160          try {
161            webview.GeolocationPermissions.allowGeolocation(this.origin);
162          } catch (error) {
163            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
164          }
165        })
166
167      // 删除指定源的位置权限，再次获取位置信息时则触发onGeolocationShow的回调
168      Button('deleteGeolocation')
169        .onClick(() => {
170          try {
171            webview.GeolocationPermissions.deleteGeolocation(this.origin);
172          } catch (error) {
173            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
174          }
175        })
176
177      // 查询指定源的位置权限
178      Button('getAccessibleGeolocation')
179        .onClick(() => {
180          try {
181            webview.GeolocationPermissions.getAccessibleGeolocation(this.origin)
182              .then(result => {
183                console.info('getAccessibleGeolocationPromise result: ' + result);
184              }).catch((error: BusinessError) => {
185              console.error(`getAccessibleGeolocationPromise error, ErrorCode: ${error.code},  Message: ${error.message}`);
186            });
187          } catch (error) {
188            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
189          }
190        })
191
192      // 注意添加网络权限ohos.permission.INTERNET
193      Web({ src: 'www.example.com', controller: this.controller })
194    }
195  }
196}
197```
198