1# Managing Location Permissions 2 3 4The **Web** component provides the location permission management capability. You can use [onGeolocationShow()](../reference/arkui-ts/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-guidelines.md) permission. 5 6 7In 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 pop-up window. 8 9 10- Frontend page code: 11 12 ```html 13 <!DOCTYPE html> 14 <html> 15 <body> 16 <p id="locationInfo">Location information</p> 17 <button onclick="getLocation()">Get Location</button> 18 <script> 19 var locationInfo=document.getElementById("locationInfo"); 20 function getLocation(){ 21 if (navigator.geolocation) { 22 <!-- Access to the device location by the frontend page --> 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- Application code: 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) => { // Notification of the location permission request 50 AlertDialog.show({ 51 title: 'Location Permission', 52 message:'Grant access to the device location?', 53 primaryButton: { 54 value: 'cancel', 55 action: () => { 56 event.geolocation.invoke(event.origin, false, false); // Deny access to the device location. 57 } 58 }, 59 secondaryButton: { 60 value: 'ok', 61 action: () => { 62 event.geolocation.invoke(event.origin, true, false); // Allow access to the device location. 63 } 64 }, 65 cancel: () => { 66 event.geolocation.invoke(event.origin, false, false); // Deny access to the device location. 67 } 68 }) 69 }) 70 } 71 } 72 } 73 ``` 74