Web中如何创建定位授权弹窗

Web中如何创建定位授权弹窗

HarmonyOS
2024-03-17 17:44:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
makeer

在Web组件中使用定位能力可参考指南管理位置权限及以下示例代码。

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('getLocation.html'), controller: this.controller }) 
        .geolocationAccess(true) 
        .onGeolocationShow((event) => { // 地理位置权限申请通知 
          AlertDialog.show({ 
            title: '位置权限请求', 
            message: '是否允许获取位置信息', 
            primaryButton: { 
              value: 'cancel', 
              action: () => { 
                if (event) { 
                  event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求 
                } 
              } 
            }, 
            secondaryButton: { 
              value: 'ok', 
              action: () => { 
                if (event) { 
                  event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求 
                } 
              } 
            }, 
            cancel: () => { 
              if (event) { 
                event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求 
              } 
            } 
          }) 
        }) 
    } 
  } 
}

在“src/main/resources/rawfile”路径下创建文件getLocation.html:

<!DOCTYPE html> 
<html> 
<body> 
<p id="locationInfo">位置信息</p> 
<button onclick="getLocation()">获取位置</button> 
<script> 
var locationInfo=document.getElementById("locationInfo"); 
function getLocation(){ 
  if (navigator.geolocation) { 
    <!-- 前端页面访问设备地理位置 --> 
    navigator.geolocation.getCurrentPosition(showPosition); 
  } 
} 
function showPosition(position){ 
  locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; 
} 
</script> 
</body> 
</html>
分享
微博
QQ
微信
回复
2024-03-18 21:20:48
相关问题
如何在自定义弹窗再次弹窗
158浏览 • 1回复 待解决
自定义弹窗的变量如何传递给页面
354浏览 • 1回复 待解决
场景化控件无法获取到定位信息
145浏览 • 1回复 待解决
pthread创建的线程如何读取rawfile
176浏览 • 1回复 待解决
如何理解自定义弹窗的gridCount参数
324浏览 • 1回复 待解决
JS API web组件 怎么使用
3468浏览 • 1回复 待解决
如何在Stage模型创建后台服务
230浏览 • 1回复 待解决
安卓app在鸿蒙2.0无法获取定位信息
12175浏览 • 4回复 待解决
如何实现向用户申请授权的功能
113浏览 • 1回复 待解决
鸿蒙是否有预授权机制?
1634浏览 • 1回复 待解决
如何创建MongoDB索引?
717浏览 • 1回复 待解决
在MongoDB如何创建一个新的数据库?
2020浏览 • 1回复 待解决
如何在自定义函数创建一个UI组件
211浏览 • 1回复 待解决
javaUI webview通过布局创建实例失败
3830浏览 • 1回复 待解决