harmony 鸿蒙Managing Location Permissions

  • 2023-06-24
  • 浏览 (557)

Managing Location Permissions

The Web component provides the location permission management capability. You can use 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 permission, and enable on the device the location permission for the application and the location information for the control panel.

In 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.

  • Frontend page code:
  <!DOCTYPE html>
  <html>
  <body>
  <p id="locationInfo">Location information</p>
  <button onclick="getLocation()">Get Location</button>
  <script>
  var locationInfo=document.getElementById("locationInfo");
  function getLocation(){
    if (navigator.geolocation) {
      <!-- Access to the device location by the frontend page -->
      navigator.geolocation.getCurrentPosition(showPosition);
    }
  }
  function showPosition(position){
    locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  }
  </script>
  </body>
  </html>
  • Application code:
  // xxx.ets
  import web_webview from '@ohos.web.webview';

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    build() {
      Column() {
        Web({ src:$rawfile('getLocation.html'), controller:this.controller })
          .geolocationAccess(true)
          .onGeolocationShow((event) => {  // Notification of the location permission request
            AlertDialog.show({
              title: 'Location Permission',
              message:'Grant access to the device location?',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  if (event) {
                    event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
                  }
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  if (event) {
                    event.geolocation.invoke(event.origin, true, false);    // Allow access to the device location.
                  }
                }
              },
              cancel: () => {
                if (event) {
                  event.geolocation.invoke(event.origin, false, false); // Deny access to the device location.
                }
              }
            })
          })
      }
    }
  }

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Web

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Web Component Overview

harmony 鸿蒙Managing Cookies and Data Storage

harmony 鸿蒙Debugging Frontend Pages by Using DevTools

harmony 鸿蒙Uploading Files

harmony 鸿蒙Invoking Frontend Page Functions on the Application

harmony 鸿蒙Invoking Application Functions on the Frontend Page

harmony 鸿蒙Opening Pages in a New Window

harmony 鸿蒙Loading Pages by Using the Web Component

0  赞