开发撞墙之奇怪的需求：度分秒格式动态转换

由于接触到GIS系统数据避免不了要处理经纬度的数据转换，有时候需要用户手动输入度分秒格式十分麻烦，就有了这个奇怪的需求

html：

<input type="radio" name="degreeConvert"  value="1" checked="checked">普通格式
<input type="radio" name="degreeConvert"  value="2">度分秒格式

Vue-mounted（）

mounted: function () {
$('input:radio[name="degreeConvert"]').change(function(){
            if($(this).is(":checked")){
                if($(this).val() == '1'){
                    let newLon = DegreeConvertBack($("#Lon").val())+"°";
                    let newLat = DegreeConvertBack($("#Lat").val())+"°";
                    $("#Lon").val(newLon);
                    $("#Lat").val(newLat);
                }else{
                    let newLon = formatDegree($("#Lon").val().split("°")[0]);
                    let newLat = formatDegree($("#Lat").val().split("°")[0]);
                    $("#Lon").val(newLon);
                    $("#Lat").val(newLat);
                }
            }
        });
}

JS

//度分秒转为普通格式
function DegreeConvertBack(value)
{
    var du = value.split("°")[0];
    var fen = value.split("°")[1].split("'")[0];
    var miao = value.split("°")[1].split("'")[1].split('"')[0];
    return Math.abs(du) + Number(((Math.abs(fen)/60) + (Math.abs(miao)/3600)).toFixed(6));
    //.toFixed()保留小数数位
}
//普通格式转为度分秒——注意这里普通格式是不带符号°的
function formatDegree(value) {
    value = Math.abs(value);
    var v1 = Math.floor(value);//度
    var v2 = Math.floor((value - v1) * 60);//分
    var v3 = Math.floor((((value - v1) * 60) - v2) * 60);//秒
    return v1 + '°' + v2 + '\'' + v3 + '"';
}

实际效果

  

其实还有点小问题，就是转换过程中小数精度计算导致难免会出现的偏差