<%--
|
Created by IntelliJ IDEA.
|
User: Administrator
|
Date: 2023/8/21
|
Time: 14:05
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
<html>
|
<head>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<title>计算经纬度距离</title>
|
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css" />
|
</head>
|
<body>
|
<div class="container-fluid">
|
<div class="row">
|
<div class="col-xs-12 col-md-12">
|
<label style="color: red">计算两经纬度坐标的距离：</label>
|
</div>
|
<div class="col-xs-12 col-md-12">
|
<table class="table table-bordered" style="text-align: center">
|
<thead style="background-color: rgba(158,172,201,0.4)">
|
<tr>
|
<td colspan="2">起点(度分格式)</td>
|
<td colspan="2">终点</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>经度1</td>
|
<td>纬度1</td>
|
<td>经度2</td>
|
<td>纬度2</td>
|
</tr>
|
<tr>
|
<td><input class="form-control" id="jingdu1"></td>
|
<td><input class="form-control" id="weidu1"></td>
|
<td><input class="form-control" id="jingdu2"></td>
|
<td><input class="form-control" id="weidu2"></td>
|
</tr>
|
<tr>
|
<td colspan="2">
|
<div class="form-group row" style="margin-bottom: 0">
|
<label for="jieguo" class="col-sm-2 col-form-label">结果(厘米):</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control" id="jieguo">
|
</div>
|
</div>
|
</td>
|
<td colspan="2">
|
<button type="button" class="btn btn-success" onclick="jisuan()">计算距离</button>
|
<!--<button type="button" class="btn btn-success" onclick="qingkong()">清空</button>-->
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-xs-12 col-md-12" style="color: red">计算两报文坐标的距离：</div>
|
<div class="col-xs-12 col-md-12"><table class="table table-bordered" style="text-align: center">
|
<thead style="background-color: rgba(158,172,201,0.4)">
|
<tr>
|
<td style="width: 50%;">起点</td>
|
<td style="width: 50%;">终点</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td><input class="form-control" id="qidian2"></td>
|
<td><input class="form-control" id="zhongdian2"></td>
|
</tr>
|
<tr>
|
<td>
|
<div class="form-group row" style="margin-bottom: 0">
|
<label for="jieguo" class="col-sm-2 col-form-label">结果(厘米):</label>
|
<div class="col-sm-10">
|
<input type="text" class="form-control" id="jieguo2">
|
</div>
|
</div>
|
</td>
|
<td>
|
<div class="form-inline" style="margin-top: 14px">
|
起点：<input type="text" class="form-control" id="baowendian1" style="width: 90%;"><br>
|
终点：<input type="text" class="form-control" id="baowendian2" style="width: 90%;">
|
<button type="button" class="btn btn-success" onclick="jisuan3()" style="margin-top: 20px">计算距离</button>
|
</div>
|
<!--<button type="button" class="btn btn-success" onclick="qingkong()">清空</button>-->
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-xs-12 col-md-12" style="color: red">经纬度 度分格式 转 度格式：</div>
|
<div class="col-xs-12 col-md-12">
|
<table class="table table-bordered" style="text-align: center">
|
<thead style="background-color: rgba(158,172,201,0.4)">
|
<tr>
|
<td>经纬度(经度;纬度)</td>
|
<td>结果</td>
|
<td></td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td><input class="form-control" id="jwdf"></td>
|
<td><input class="form-control" id="jwd"></td>
|
<td><button type="button" class="btn btn-success" onclick="jisuan2()">转换</button>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-xs-12 col-md-12"> <label style="color: red">最近计算记录：</label></div>
|
<div class="col-xs-12 col-md-12">
|
<table class="table table-bordered">
|
<thead style="background-color: rgba(158,172,201,0.4)">
|
<tr>
|
<td style="font-size: 12px">起点 - 经度 / 纬度</td>
|
<td style="font-size: 12px">终点 - 经度 / 纬度</td>
|
<td style="font-size: 12px">距离(厘米)</td>
|
</tr>
|
</thead>
|
<tbody id="nr">
|
<c:forEach items="${dataList}" var="jingwei" end="10">
|
<tr>
|
<td style="font-size: 14px">${jingwei.qishi}</td>
|
<td style="font-size:14px;">${jingwei.zhongzhi}</td>
|
<td style="font-size:14px;">${jingwei.jieguo}</td>
|
</tr>
|
</c:forEach>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script src="HouTai/Js/jquery-3.5.1.js"></script>
|
<script>
|
function jisuan() {
|
var jingdu1 = document.getElementById("jingdu1").value;
|
var weidu1 = document.getElementById("weidu1").value;
|
var jingdu2 = document.getElementById("jingdu2").value;
|
var weidu2 = document.getElementById("weidu2").value;
|
var str = weidu1 + ";" + jingdu1 + ";" + weidu2 + ";" + jingdu2;
|
$.ajax({
|
url: "/hxzkuwb/jisuanjingwei.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
str: str
|
},
|
success: function (data) {
|
var str = ""
|
//var k = 0; k < 10 && k < data.dataList.length; k++
|
$("#nr").html(str);
|
$("#jieguo").val(data.jieguo);
|
}
|
})
|
}
|
function qingkong() {
|
document.getElementById("jingdu1").value = "";
|
document.getElementById("weidu1").value = "";
|
document.getElementById("jingdu2").value = "";
|
document.getElementById("weidu2").value = "";
|
document.getElementById("jieguo").value = "";
|
}
|
function jisuan2() {
|
var jwdf = document.getElementById("jwdf").value;
|
$.ajax({
|
url: "/hxzkuwb/jisuanjingwei2.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
str: jwdf
|
},
|
success: function (data) {
|
$("#jwd").val(data.jieguo);
|
}
|
})
|
}
|
function jisuan3() {
|
var qidian = document.getElementById("qidian2").value;
|
var zhongdian = document.getElementById("zhongdian2").value;
|
var qidians = qidian.split(",");
|
var zhongdians = zhongdian.split(",");
|
$("#baowendian1").val(qidians[4]+";"+qidians[2]);
|
$("#baowendian2").val(zhongdians[4]+";"+zhongdians[2]);
|
$.ajax({
|
url: "/hxzkuwb/jisuanjingwei3.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
qidian: qidian,
|
zhongdian: zhongdian
|
},
|
success: function (data) {
|
var str = ""
|
$("#nr").html(str);
|
$("#jieguo2").val(data.jieguo);
|
}
|
})
|
}
|
</script>
|
</html>
|
