1# 管理位置权限 2 3 4Web组件提供位置权限管理能力。开发者可以通过[onGeolocationShow()](../reference/arkui-ts/ts-basic-components-web.md#ongeolocationshow)接口对某个网站进行位置权限管理。Web组件根据接口响应结果，决定是否赋予前端页面权限。获取设备位置，需要开发者配置[ohos.permission.LOCATION](../security/accesstoken-guidelines.md)权限。 5 6 7在下面的示例中，用户点击前端页面"获取位置"按钮，Web组件通过弹窗的形式通知应用侧位置权限请求消息。 8 9 10- 前端页面代码。 11 12 ```html 13 <!DOCTYPE html> 14 <html> 15 <body> 16 <p id="locationInfo">位置信息</p> 17 <button onclick="getLocation()">获取位置</button> 18 <script> 19 var locationInfo=document.getElementById("locationInfo"); 20 function getLocation(){ 21 if (navigator.geolocation) { 22 <!-- 前端页面访问设备地理位置 --> 23 navigator.geolocation.getCurrentPosition(showPosition); 24 } 25 } 26 function showPosition(position){ 27 locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 28 } 29 </script> 30 </body> 31 </html> 32 ``` 33 34 35- 应用代码。 36 37 ```ts 38 // xxx.ets 39 import web_webview from '@ohos.web.webview'; 40 41 @Entry 42 @Component 43 struct WebComponent { 44 controller: web_webview.WebviewController = new web_webview.WebviewController(); 45 build() { 46 Column() { 47 Web({ src:$rawfile('getLocation.html'), controller:this.controller }) 48 .geolocationAccess(true) 49 .onGeolocationShow((event) => { // 地理位置权限申请通知 50 AlertDialog.show({ 51 title: '位置权限请求', 52 message: '是否允许获取位置信息', 53 primaryButton: { 54 value: 'cancel', 55 action: () => { 56 event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求 57 } 58 }, 59 secondaryButton: { 60 value: 'ok', 61 action: () => { 62 event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求 63 } 64 }, 65 cancel: () => { 66 event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求 67 } 68 }) 69 }) 70 } 71 } 72 } 73 ``` 74