JavaScript单页面经纬度距离计算

JavaScript单页面经纬度距离计算

<!DOCTYPE html>
<html>
<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" />
    <meta name="description" content="经纬度距离计算" />
    <meta name="author" content="acdiost" />  
    <title>经纬度距离计算</title>
    <style>
        body{
            background: #353f42;
        }

        *{
            padding: 0;
            margin: 0;
        }

        .main {
            margin: 0 auto;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 15px;
            width: 350px;
            height: 350px;
            background: #ffffff;
            position: absolute;
            top: 30%;
            left: 50%;
            margin-top: -100px;
            margin-left: -190px;
        }

        .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: x-large;
        }

        .input-content {
            width: 100%;
            height: 240px;
        }

        .input-content input {
            width: 330px;
            height: 40px;
            border: 1px solid #87c7d0;
            background: #ffffff;
            padding-left: 10px;
            padding-right: 10px;
            margin-top: 15px;
        }

        .calculate-btn {
            width: 80px;
            height: 40px;
            color: #fff;
            background: #36cee2;
            line-height: 40px;
            text-align: center;
            border: 0px;
        }

        .calculate-btn:hover {
            cursor:pointer;
            background: #2ea8b8;
        }

    </style>
    <script type="text/javascript">

        // 角度转换为近似相等的弧度角
        function radian(d) {
            return d * Math.PI / 180.0;
        }

        /**
         * 计算两个坐标点的距离
         * longitude1   经度1
         * latitude1    纬度1
         * longitude2   经度2
         * latitude2    纬度2
         */
        function calculate() {

            var longitude1 = document.getElementById("longitude1").value;
            var latitude1 = document.getElementById("latitude1").value;
            var longitude2 = document.getElementById("longitude2").value;
            var latitude2 = document.getElementById("latitude2").value;

            if (longitude1 === "" || latitude1 === "" || longitude2 === "" || latitude2 === "") {
                alert("请务必输入一个值。");
                return;
            }

            // 相同经度,不同纬度距离有所误差。在除赤道外的其他纬线上,经度差1度对应的实际距离是111*cos纬度。
            var latitude = radian(latitude1) - radian(latitude2);
            var longitude = radian(longitude1) - radian(longitude2);
            var result = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(latitude / 2), 2) + Math.cos(radian(latitude1)) * Math.cos(radian(latitude2)) * Math.pow(Math.sin(longitude / 2), 2)));
            // 地球半径约6378.137。保留单位到厘米
            result = Math.round(result * 6378.137 * 1000000) / 1000000;
            // 千米转换为米
            console.log(result * 1000);

            // 计算完成后清空表单内容
            if(confirm('两坐标相距约 ' + result * 1000 + ' 米,已记录在控制台,按F12选择 Console 查看历史记录,是否要清除表单内容?')){
            document.getElementById("longitude1").value="";
            document.getElementById("latitude1").value="";
            document.getElementById("longitude2").value="";
            document.getElementById("latitude2").value="";
            }

        }
    </script>
</head>
<body>
    <div class="main">

        <div class="title">
            <span>两坐标距离计算器</span>
        </div>

        <form>

            <div class="input-content">
                <div>
                    <input type="text" id="longitude1" placeholder="坐标1的经度" value="" required/>
                </div>

                <div>
                    <input type="text" id="latitude1" placeholder="坐标1的纬度" value="" required/>
                </div>

                <div>
                    <input type="text" id="longitude2" placeholder="坐标2的经度" value="" required/>
                </div>

                <div>
                    <input type="text" id="latitude2" placeholder="坐标2的纬度" value="" required/>
                </div>
            </div>

            <div style="text-align: center;">
                <button type="reset" class="calculate-btn" style="float: left;" >重置</button>
                <button onclick="calculate();" class="calculate-btn" style="float: right;">计算</button>
            </div>

        </form>

    </div>
    </body>
</html>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注