我们在开发项目时,会有遇到需要判断用户是否异地登录的要求,而这个要求则需要我们获取用户的经纬度,而在BOM对象中的Navigator中的geolocation则可以获取到用户设备的经纬度
geolocation一共有三种方法,而获取经纬度我们只介绍第一种方法
下面给出获取地理位置的实例
<!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>
<style>
#map {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<label for='long'>您当前的经度为</label>
<input type="text" name="" id="longitude">
<button type="button" id='lal'>获取经纬度</button>
</div>
<div>
<label for='lat'>您当前的纬度为</label>
<input type="text" name="" id="latitude">
</div>
<script>
var lal = document.getElementById('lal');
var long = document.getElementById('longitude');
var lat = document.getElementById('latitude');
lal.onclick = function () {
if (navigator.geolocation) //检测当前设备是否支持H5Geolocation API
{
navigator.geolocation.getCurrentPosition(showmap, error);
//检测结果存在地理定位对象的话,navigator.geolocation调用将返回该对象
//第一个参数获取当前地理信息成功是执行的回调函数,带3个参数,
//第一个参数是必写的,表示获取当前地理位置信息成功时所执行的回调函数,该函数参数position也是必须。
//第二个参数是获取地理位置信息失败的回调函数,该函数的参数error也是必写的,第三个参数是一些可选属性列表(2、3个参数可省略)
}
else {
alert("该浏览器不支持获取地理位置");
}
}
function showmap(position) { //.强调coords
var cords = position.coords;
long.value = cords.longitude;
lat.value = cords.latitude;
// var latitude = cords.latitude; //获取纬度
// var longitude = cords.longitude; //获取经度
}
function error(error) { //.强调code
var err = error.code;
switch (err) {
case 1: alert("用户拒绝了位置服务"); break;
case 2: alert("获取不到位置信息"); break;
case 3: alert("获取信息超时");
}
}
</script>
</body>
</html>
运行结果:
点击按钮后:
成功写入:
关于geolocation的更多请访问Navigator.geolocation - Web API 接口参考 | MDN
转载自CSDN blog.csdn.net/qq_32810963… 作者:南无与青