master

分支 (1)

管理

管理

master

test-z
/
location.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="location">
			<p>经度：<span id="longitude"></span></p>
			<p>纬度：<span id="latitude"></span></p>
			<p>地理位置：<span id="pos"></span></p>
		</div>
		<script>
			window.onload = function(){
				console.log(navigator)
				if (navigator.geolocation){ // true   判断地址位置是否可用
				   // 地理位置服务可用
				   console.log("可用")

				   // 设置参数  option 参数   options  多个参数
				   var options = {
					   timeout:5000, // ms 5s  获取时间范围，超过5s以后自动停止获取
					   enableHighAccuracy:true  // 精准定位
				   }
				   // 开始获取   success 成功   error 错误
				   navigator.geolocation.getCurrentPosition(successLocation,errorLocation,options)
				} else {
				  // 地理位置服务不可用
				  alert("当前浏览器不支持获取,请升级浏览器版本或者更换浏览器")
				}
			}


			// 成功
			function successLocation(pos){
				console.log(pos)
				 // 获取位置信息
				var coords = pos.coords;
				// 获取经度
				var longitude = coords.longitude
				//获取纬度
				var latitude = coords.latitude;

				// 渲染Dom
				var longitudeDom = document.querySelector("#longitude") //经度
				var latitudeDom = document.querySelector("#latitude") // 纬度
				var posDom = document.querySelector("#pos") // (40,30)
				longitudeDom.innerHTML = longitude
				latitudeDom.innerHTML = latitude
				posDom.innerHTML = "(" +  longitude + "," +  latitude + ")" //(40,30)
			}
			// 失败
			function errorLocation(error){
				console.log(error)
				if(error.code == 1){ // 用户拒绝访问地理位置
				   alert("用户拒绝访问地理位置")
			    }else if(error.code == 2){ // 获取不到位置信息
				   alert("获取不到位置信息")
			    }else if(error.code == 3){ //  timeout
				   alert("获取信息超时")
			    }else{
				   alert("未知错误！")
			   }
			}

		</script>

	</body>
</html>