1e41f4b71Sopenharmony_ci# Managing Location Permissions 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe **Web** component provides the location permission management capability. You can use [onGeolocationShow()](../reference/apis-arkweb/ts-basic-components-web.md#ongeolocationshow) to manage the location permission specific to a website. Based on the API response, the **Web** component determines whether to grant the location permission to the frontend page. To obtain the device location, you need to declare the [ohos.permission.LOCATION](../security/AccessToken/request-user-authorization.md), [ohos.permission.APPROXIMATELY_LOCATION](../security/AccessToken/request-user-authorization.md), and [ohos.permission.LOCATION_IN_BACKGROUND](../security/AccessToken/request-user-authorization.md) permissions, and enable on the device the location permission for the application and the location information for the control panel. For details, see [Geolocation](../reference/apis-location-kit/js-apis-geolocation.md). 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIn the following example, when a user clicks the **Get Location** button on the frontend page, the **Web** component notifies the application of the location permission request in a dialog box. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci- Frontend page code: 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci ```html 13e41f4b71Sopenharmony_ci <!DOCTYPE html> 14e41f4b71Sopenharmony_ci <html> 15e41f4b71Sopenharmony_ci <body> 16e41f4b71Sopenharmony_ci <p id="locationInfo">Location information</p> 17e41f4b71Sopenharmony_ci <button onclick="getLocation()">Get Location</button> 18e41f4b71Sopenharmony_ci <script> 19e41f4b71Sopenharmony_ci var locationInfo=document.getElementById("locationInfo"); 20e41f4b71Sopenharmony_ci function getLocation(){ 21e41f4b71Sopenharmony_ci if (navigator.geolocation) { 22e41f4b71Sopenharmony_ci <!-- Access to the device location by the frontend page --> 23e41f4b71Sopenharmony_ci navigator.geolocation.getCurrentPosition(showPosition); 24e41f4b71Sopenharmony_ci } 25e41f4b71Sopenharmony_ci } 26e41f4b71Sopenharmony_ci function showPosition(position){ 27e41f4b71Sopenharmony_ci locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 28e41f4b71Sopenharmony_ci } 29e41f4b71Sopenharmony_ci </script> 30e41f4b71Sopenharmony_ci </body> 31e41f4b71Sopenharmony_ci </html> 32e41f4b71Sopenharmony_ci ``` 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci- Application code: 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ci ```ts 38e41f4b71Sopenharmony_ci // xxx.ets 39e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 40e41f4b71Sopenharmony_ci import { BusinessError } from '@kit.BasicServicesKit'; 41e41f4b71Sopenharmony_ci import { abilityAccessCtrl, common } from '@kit.AbilityKit'; 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci let context = getContext(this) as common.UIAbilityContext; 44e41f4b71Sopenharmony_ci let atManager = abilityAccessCtrl.createAtManager(); 45e41f4b71Sopenharmony_ci 46e41f4b71Sopenharmony_ci // Request the location permission from the user. 47e41f4b71Sopenharmony_ci atManager.requestPermissionsFromUser(context, ["ohos.permission.APPROXIMATELY_LOCATION"]).then((data) => { 48e41f4b71Sopenharmony_ci console.info('data:' + JSON.stringify(data)); 49e41f4b71Sopenharmony_ci console.info('data permissions:' + data.permissions); 50e41f4b71Sopenharmony_ci console.info('data authResults:' + data.authResults); 51e41f4b71Sopenharmony_ci }).catch((error: BusinessError) => { 52e41f4b71Sopenharmony_ci console.error(`Failed to request permissions from user. Code is ${error.code}, message is ${error.message}`); 53e41f4b71Sopenharmony_ci }) 54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci @Entry 56e41f4b71Sopenharmony_ci @Component 57e41f4b71Sopenharmony_ci struct WebComponent { 58e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ci build() { 61e41f4b71Sopenharmony_ci Column() { 62e41f4b71Sopenharmony_ci Web({ src: $rawfile('getLocation.html'), controller: this.controller }) 63e41f4b71Sopenharmony_ci .geolocationAccess(true) 64e41f4b71Sopenharmony_ci .onGeolocationShow((event) => { // Notification of the location permission request 65e41f4b71Sopenharmony_ci AlertDialog.show({ 66e41f4b71Sopenharmony_ci title: 'Location Permission', 67e41f4b71Sopenharmony_ci message:'Grant access to the device location?', 68e41f4b71Sopenharmony_ci primaryButton: { 69e41f4b71Sopenharmony_ci value: 'cancel', 70e41f4b71Sopenharmony_ci action: () => { 71e41f4b71Sopenharmony_ci if (event) { 72e41f4b71Sopenharmony_ci event.geolocation.invoke(event.origin, false, false); // Deny access to the device location. 73e41f4b71Sopenharmony_ci } 74e41f4b71Sopenharmony_ci } 75e41f4b71Sopenharmony_ci }, 76e41f4b71Sopenharmony_ci secondaryButton: { 77e41f4b71Sopenharmony_ci value: 'ok', 78e41f4b71Sopenharmony_ci action: () => { 79e41f4b71Sopenharmony_ci if (event) { 80e41f4b71Sopenharmony_ci event.geolocation.invoke(event.origin, true, false); // Allow access to the device location. 81e41f4b71Sopenharmony_ci } 82e41f4b71Sopenharmony_ci } 83e41f4b71Sopenharmony_ci }, 84e41f4b71Sopenharmony_ci cancel: () => { 85e41f4b71Sopenharmony_ci if (event) { 86e41f4b71Sopenharmony_ci event.geolocation.invoke(event.origin, false, false); // Deny access to the device location. 87e41f4b71Sopenharmony_ci } 88e41f4b71Sopenharmony_ci } 89e41f4b71Sopenharmony_ci }) 90e41f4b71Sopenharmony_ci }) 91e41f4b71Sopenharmony_ci } 92e41f4b71Sopenharmony_ci } 93e41f4b71Sopenharmony_ci } 94e41f4b71Sopenharmony_ci ``` 95