H5定位的实现

梦里梦外; 2022-06-01 10:18 163阅读 0赞

<!DOCTYPE html>
    <html>
    <body>
    	<p id="demo">点击这个按钮，获得您的坐标：</p>
    	<button οnclick="getLocation()">试一下</button>
    	<script>
    		var x = document.getElementById("demo");
    		function getLocation() {
    			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>

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 Appium Inspector定位Webview/H5页面元素

目录操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是

一时失言乱红尘/ 2023年10月09日 10:15/ 0 赞/ 11 阅读

相关标准h5的定位_红旗轿车H5：动力系统是优势，基本表现中上层

红旗轿车历经近几年的快速发展，逐渐进入了小伙伴们的视野，不单单只是将原本的品牌知名度提升了一个级别，同时在销售量上也取得了一个让我们满意的成绩。当然了，每一个品牌车型旗下总是有

深藏阁楼爱情的钟/ 2023年01月03日 05:57/ 0 赞/ 86 阅读

相关 H5页面原生定位百度转坐标

项目场景：要求：用户点击输入框的时候获取当前地址自动填写适用：手机端页面提示：浏览器出现定位不准确，谷歌浏览器不允许 ------------------

亦凉/ 2022年10月14日 10:51/ 0 赞/ 134 阅读

相关 H5定位的实现

<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的坐标：</p> <but

梦里梦外;/ 2022年06月01日 10:18/ 0 赞/ 164 阅读

相关 H5动画实现---过渡

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两

短命女/ 2022年05月09日 02:14/ 0 赞/ 346 阅读

相关 H5实现搜索记录功能

<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>搜索记录</titl

谁践踏了优雅/ 2022年04月22日 13:42/ 0 赞/ 281 阅读

相关 H5-- （功能）App内嵌h5网页实现芝麻认证的接入

1、需求：由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK，所以我们app芝麻认证只有通过内嵌H5页面实现 2、分析：通过调研 “芝麻认证”官方技术文档，接入芝麻

港控/mmm°/ 2022年01月25日 15:26/ 0 赞/ 525 阅读

相关 h5 定位微信环境需要调用jsdk

function Location() {}; Location.prototype.getLocation = function(callback)

小咪咪/ 2021年09月19日 02:10/ 0 赞/ 444 阅读

相关 H5实现人脸抓拍

近期遇到个需求，要求是在H5网页上实现人脸抓拍。这可咋搞噢。无法，硬着头皮开干咯。实现目标：检测到人脸并自动抓拍 <!DOCTYPE html> <htm

浅浅的花香味﹌/ 2021年09月08日 17:44/ 0 赞/ 358 阅读

相关 h5定位总结（h5api + 高德 + 腾讯）

H5 API定位 > 总结：定位非常不准，并且成功率很低。高德定位需要在https域名下调用，本地调用偶尔能成功 / 高德精确定位 @param

刺骨的言语ヽ痛彻心扉/ 2021年08月30日 13:43/ 0 赞/ 981 阅读