harmony 鸿蒙Managing Location Permissions
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 鸿蒙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 鸿蒙Invoking Frontend Page Functions on the Application
harmony 鸿蒙Invoking Application Functions on the Frontend Page
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦