JS中使用Navigator.geolocation获取地理位置

5,179 阅读1分钟

   我们在开发项目时,会有遇到需要判断用户是否异地登录的要求,而这个要求则需要我们获取用户的经纬度,而在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… 作者:南无与青