<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>H5定位</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
h1{
text-align: center;
margin: 20px auto;
color: darkgoldenrod;
font-weight: bold;
}
button{
display: block;
50%;
height: 40px;
line-height: 40px;
font-weight: bold;
text-align: center;
border: none;
margin: 30px auto;
border-radius: 3px;
color: #fff;
font-size: 14px;
box-shadow: 4px 4px 5px rgba(0,0,0,0.5);
}
.bt1{
background: green;
}
.bt2{
background:#DB7093;
}
span{
display: block;
text-align: center;
color: deeppink;
}
a{
display: block;
line-height: 24px;
text-align: center;
margin: 10px auto;
}
.footer{
position: absolute;
left: 0;
bottom: 20px;
100%;
color: #474747;
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<h1>H5定位</h1>
<p id="pId"></p>
<button class="bt1" onclick="getLocation()"> 我的经纬度 </button>
<span>点下试试吧！可以获得你的经纬度。</span>
</body>
<script>
var x=document.querySelector("#pId")
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="定位失败";
}
}
function showPosition(position){
x.innerHTML="我当前经度为"+position.coords.latitude+",纬度为"+position.coords.longitude+"的地方哦"
}
</script>
</html>