通过navigator.geolocation来获取浏览器的坐标属性,话不多说,直接上代码,简洁明了,通俗易懂。
1.通过判断看浏览器支不支持
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("该浏览器不支持获取地理位置");
}
2. 展示经纬度坐标
x.innerHTML = "经度" + position.coords.longitude +
"<br>" + "纬度" + position.coords.latitude
3.接下来看下整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="btn()">按钮</button>
<p id="demo">这是经纬度</p>
</body>
</html>
<script>
var x = document.getElementById("demo");
function btn() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "该浏览器不支持获取地理位置";
}
}
function showPosition(position) {
x.innerHTML = "经度" + position.coords.longitude +
"<br>" + "纬度" + position.coords.latitude
}
</script>