js获取经纬度

paul jeorgh

于 2024-09-28 23:58:25 发布

阅读量89

点赞数 1

文章标签： css html es6 javascript

本文链接：https://blog.csdn.net/2302_79777012/article/details/142624260

版权


<!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>获取当前坐标</title>
    <style>
        body{
            background-color: aliceblue;
            text-align: center;
        }
        #map {
            width: 200px;
            height: 200px;
            border: 1px solid;
        }
        .item {
            margin: 20px;
        }
</style>

</head>

<body>
    <div class="item">
        <h1>获取当前坐标信息</h1>
    </div>

    <div class="item">
        <label for='long'>你当前的经度为：</label>
        <input type="text" name="" id="longitude">
    </div>
    <div class="item">
        <label for='lat'>你当前的纬度为：</label>
        <input type="text" name="" id="latitude">
        <!-- <button id='copy'>一键复制</button> -->
    </div>
    <div class="item">
        <p id="content"></p>

    </div>
    <div class="item">
        <button id='lal'>获取经纬度</button>

    </div>

    <script>
        let lal = document.getElementById('lal');
        // let copy = document.getElementById('copy');
        let content = document.getElementById('content');
        let long = document.getElementById('longitude');
        let lat = document.getElementById('latitude');
        lal.addEventListener('click', () => {
            if (navigator.geolocation)   //检测当前设备是否支持H5Geolocation API
            {
                navigator.geolocation.getCurrentPosition(showmap, error);
                //检测结果存在地理定位对象的话，navigator.geolocation调用将返回该对象
                //第一个参数获取当前地理信息成功是执行的回调函数，带3个参数，
                //第一个参数是必写的，表示获取当前地理位置信息成功时所执行的回调函数，该函数参数position也是必须。
                //第二个参数是获取地理位置信息失败的回调函数，该函数的参数error也是必写的，第三个参数是一些可选属性列表（2、3个参数可省略）
            }
            else {
                alert("该浏览器不支持获取地理位置");
            }
        })

        // copy.addEventListener('click', e => {
        //     console.log(e);
        //     content.innerHTML = "你当前地理坐标为：(" + long.value + "," + lat.value + ")"
        // })


        function showmap(position) {       //.强调coords
            var cords = position.coords;
            long.value = cords.longitude;
            lat.value = cords.latitude;
            content.innerHTML = "你当前地理坐标：(" + long.value + "," + lat.value + ")"
        }
        function error(error) {           //.强调code
            var err = error.code;
            switch (err) {
                case 1: alert("用户拒绝了位置服务"); break;
                case 2: alert("获取不到位置信息"); break;
                case 3: alert("获取信息超时");
            }
        }
</script>
</body>

</html>