首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >WebView处理网页位置请求

WebView处理网页位置请求

作者头像
技术小黑屋
发布于 2018-09-04 09:13:18
发布于 2018-09-04 09:13:18
1.4K0
举报
文章被收录于专栏:技术小黑屋技术小黑屋

随着移动设备的激增,LBS(Location Based Service)已然成为趋势,其最关键的还是获取设备的位置信息。native代码获取位置信息轻轻松松可以搞定,实际上网页获取位置信息也不是那么困难。

HTML5中,提供了一套定位用户信息的接口,当然这个位置信息是通过客户端,准确说是浏览器获取的。

注意,位置信息属于个人隐私的范围,只有经过用户同意之后才能获取到信息。

网页如何实现请求位置信息

使用getCurrentPosition()方法来请求位置信息。 下面是一个很简单的示例,来展示用户位置信息的经度和纬度。

lineos:false

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x = document.getElementById("demo"); function getLocation() { console.info("getLocation working") if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } </script> </body> </html>

示例阐述

  • 检测getLocation方法是否可用
  • 如果可以调用getCurrentPosition方法,否则提示浏览器不支持
  • 如果getCurrentPosition获取信息成功,返回一个坐标系的对象,并将这个对象作为参数传递到showPosition方法,如果失败,调用showError方法,并将错误码作为showError方法的参数。
  • showPosition方法展示经度和纬度信息
  • showError方法用来处理请求错误

上述部分参考自html5_geolocation w3cschool,更多高级操作请访问左侧链接。

WebView如何返回给网页

大致操作步骤

  • 在manifest中申请android.permission.ACCESS_FINE_LOCATION 或 android.permission.ACCESS_COARSE_LOCATION 权限。两者都有更好。
  • 设置webivew开启javascript功能,地理定位功能,设置物理定位数据库路径
  • 在onGeolocationPermissionsShowPrompt处理物理位置请求,常用的是提示用户,让用户决定是否允许。

使用的API

  • android.permission.ACCESS_FINE_LOCATION 通过GPS,基站,Wifi等获取精确的位置信息。
  • android.permission.ACCESS_COARSE_LOCATION 通过基站,Wifi等获取错略的位置信息。
  • onGeolocationPermissionsShowPrompt 位置信息请求回调,通常在这里弹出选择是否赋予权限的对话框
  • GeolocationPermissions.Callback.invoke(String origin, boolean allow, boolean remember)决定是否真正提供给网页信息,可根据用户的选择结果选择处理。 实现代码

lineos:false

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

final WebView webView = new WebView(this); addContentView(webView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT) ); WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setGeolocationEnabled(true); settings.setGeolocationDatabasePath(getFilesDir().getPath()); webView.setWebChromeClient(new WebChromeClient() { @Override public void onGeolocationPermissionsHidePrompt() { super.onGeolocationPermissionsHidePrompt(); Log.i(LOGTAG, "onGeolocationPermissionsHidePrompt"); } @Override public void onGeolocationPermissionsShowPrompt(final String origin, final Callback callback) { AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setMessage("Allow to access location information?"); OnClickListener dialogButtonOnClickListener = new OnClickListener() { @Override public void onClick(DialogInterface dialog, int clickedButton) { if (DialogInterface.BUTTON_POSITIVE == clickedButton) { callback.invoke(origin, true, true); } else if (DialogInterface.BUTTON_NEGATIVE == clickedButton) { callback.invoke(origin, false, false); } } }; builder.setPositiveButton("Allow", dialogButtonOnClickListener); builder.setNegativeButton("Deny", dialogButtonOnClickListener); builder.show(); super.onGeolocationPermissionsShowPrompt(origin, callback); Log.i(LOGTAG, "onGeolocationPermissionsShowPrompt"); } }); webView.loadUrl("file:///android_asset/geolocation.html");

疑问解答

I/SqliteDatabaseCpp(21863): sqlite returned: error code = 14

原因是你没有设置setGeolocationDatabasePath,按照上面例子设置即可。

点击之后没有任何变化

  • 检查代码是否按照上面一样,是否有错误。
  • 在第一次请求的是否,需要的反应时间比较长。

检测定位服务是否可用

当GPS_PROVIDER和NETWORK_PROVIDER有一者可用,定位服务就可以用,当两者都不能用时,即定位服务不可以用。 注意PASSIVE_PROVIDER不能作为定位服务可用的标志。因为这个provider只会返回其他Provider提供的位置信息,自己无法定位。

lineos:false

1 2 3 4 5 6 7

private void testGeolocationOK() { LocationManager manager = (LocationManager)getSystemService(Context.LOCATION_SERVICE); boolean gpsProviderOK = manager.isProviderEnabled(LocationManager.GPS_PROVIDER); boolean networkProviderOK = manager.isProviderEnabled(LocationManager.NETWORK_PROVIDER); boolean geolocationOK = gpsProviderOK && networkProviderOK; Log.i(LOGTAG, "gpsProviderOK = " + gpsProviderOK + "; networkProviderOK = " + networkProviderOK + "; geoLocationOK=" + geolocationOK); }

跳转到位置设置界面

我们只需要发送一个简单的隐式intent即可启动位置设置界面

lineos:false

1 2

Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS); startActivity(intent);

示例代码

百度云盘

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
第182天:HTML5——地理定位
HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
半指温柔乐
2018/09/11
2.1K0
第182天:HTML5——地理定位
从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
于是就变成了 webkitRequestFullScreen(), mozRequestFullScreen(), msRequestFullScreen()。由于使用的方法不同,所以要做兼容性处理。
Daotin
2018/08/31
9460
从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
【前端探索】H5获取用户定位?看这一篇就够了
由于现在做的是强依赖于LBS的业务,在业务迭代的两年间,我们遇到了无数关于Web页面上获取用户位置定位的问题:
luciozhang
2023/04/22
10.3K0
【前端探索】H5获取用户定位?看这一篇就够了
一些小参考
工作区(你本身的电脑)和版本库(git仓库,仓库里面有git的主体和暂存区),首先是工作区提交到暂存区(可以重复很多次),然后暂存区提交到git主体就是提交改变内容,插入分支里面(git commit的话只会commit暂存区内容)
用户7267083
2022/12/08
6800
手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器,都返回一样的错误信息: POSITION_UNAVAILABLE 网上的方法大概是这样的: if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess , onError); }else{ ale
蓓蕾心晴
2018/04/12
5.4K0
史上最全webview详解
WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5Activity 加载类,不想看的可以直接跳下载。 WebSettings WebSettings webSettings = mWebView .getSettings(); //支持获取手势焦点,输入用户名、密码或其他 webview.requestFocusFromTouch(); setJavaScriptEnabled(true);
xiangzhihong
2018/02/01
7K0
网页|通过geolocation获取地理位置信息
获取用户地理位置信息,在各大网站、app中,例如淘宝,美团等购物平台已经是很常见的了。一些常见的旅游app,地图查询软件也都普遍的提供了位置定位等功能。常见的获取地理位置信息的办法是通过h5提供的地理位置功能(Geolocation API)。
算法与编程之美
2020/04/15
2.3K0
H5中唤起百度或高德地图并规划路径
牛老师讲GIS
2024/12/30
3700
H5中唤起百度或高德地图并规划路径
【Go 语言社区】HTML5 Geolocation(地理定位)-转
HTML5 Geolocation(地理定位)用于定位用户的位置。 ---- 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用
李海彬
2018/03/20
2.8K0
【进阶系列】地理位置专题
        HTML5 Geolocation(地理定位)用于定位用户的位置。
江中散人_Jun
2023/10/16
1.4K0
【进阶系列】地理位置专题
位置定位(LocationManager)
LocationManager是Android 提供的Location 服务,来获得当前的位置信息和卫星信息。
李小白是一只喵
2020/06/11
2.7K0
位置定位(LocationManager)
Autojs获取GPS定位信息
记得先把autojs的“定位权限”给开了!!!! console.show(); importClass(android.content.BroadcastReceiver); importClass(android.content.Intent); importClass(android.content.Context); importClass(android.app.PendingIntent); importClass(android.provider.Settings); importClass(
小锋学长生活大爆炸
2021/10/08
3.2K0
【愚公系列】2023年12月 HarmonyOS教学课程 054-Web组件(基本使用和属性)
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络,使用户能够通过浏览器访问和交互式使用各种信息和资源,如网页、文档、图片、视频、音频等。通过Web,用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议(HTTP),超文本标记语言(HTML)和统一资源定位器(URL)。
愚公搬代码
2025/06/02
720
【愚公系列】2023年12月 HarmonyOS教学课程 054-Web组件(基本使用和属性)
HTML5新特性
本章的主要内容有: ---- [1] 用于媒体回放的 video 和audio 元素 [2] HTML5拖放 [3] canvas简单应用 [4] Web存储: localStorage 和 SessionStorage [5] Input输入类型 [6] 表单类型 [7] 表单属性 [8] 地理定位 (geolocation) [9] Web Workers: Worker [10] 服务器发送事件 EventSource ---- [1] 用于媒体回放的 video 和audio 元素 video 支持
echobingo
2018/04/25
1.8K0
HTML5新特性
相关推荐
第182天:HTML5——地理定位
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档