<%@ 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" %>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html lang="zh-CN">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link href="/hxzkoa/hxzk/assets/img/favicon.ico" rel="icon" type="image/x-icon" />
|
<link href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/img/favicon.ico" rel="icon" type="image/x-icon" />
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script>
|
<title>在线经纬度距离计算</title>
|
<style type="text/css">
|
.classname {
|
position: fixed;
|
left: 10px;
|
bottom: 5px;
|
right: 10px;
|
width: 99%;
|
background-color: gray;
|
color: white;
|
text-align: center;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="row">
|
<div class="col-md-2"></div>
|
<div class="col-md-8">
|
<!--经纬度计算距离-->
|
<label
|
style="margin-top: 40px;margin-bottom: 20px;font-size: 20px;color: red">计算两经纬度坐标的距离：</label>
|
<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>
|
<!--报文经纬度计算距离-->
|
<label
|
style="margin-top: 40px;margin-bottom: 20px;font-size: 20px;color: red">计算两报文坐标的距离：</label>
|
<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">
|
(结果)起点：<input type="text" class="form-control" id="baowendian1" style="width: 25%;">
|
|
|
终点：<input type="text" class="form-control" id="baowendian2" style="width: 25%;">
|
|
<button type="button" class="btn btn-success" onclick="jisuan3()">计算距离</button>
|
</div>
|
<!--<button type="button" class="btn btn-success" onclick="qingkong()">清空</button>-->
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<!--经纬度格式转换-->
|
<label style="margin-top: 40px;margin-bottom: 20px;font-size: 20px;color: red">经纬度 度分格式 转
|
度格式：</label>
|
<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>
|
<label style="margin-top: 40px;margin-bottom: 20px;font-size: 20px;color: red">最近计算记录：</label>
|
<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 id="nr">
|
<c:forEach items="${dataList}" var="jingwei" end="10">
|
<tr class="dadada">
|
<td>${jingwei.qishi}</td>
|
<td>${jingwei.zhongzhi}</td>
|
<td>${jingwei.jieguo}</td>
|
</tr>
|
</c:forEach>
|
</tbody>
|
</table>
|
</div>
|
<div class="col-md-2"></div>
|
</div>
|
<div class="classname">
|
<a href="http://www.bdsmall.cn/"
|
style="color: rgb(255, 255, 255);border-bottom: 1px solid rgb(255, 255, 255);">北京华星北斗智控技术有限公司</a>版权所有
|
</div>
|
<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: "jisuanjingwei.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
str: str
|
},
|
success: function (data) {
|
var str = ""
|
//var k = 0; k < 10 && k < data.dataList.length; k++
|
for (var k = 0; k < 10 && k < data.dataList.length; k++) {
|
str += "<tr><td>" + data.dataList[k].qishi + "</td><td>" + data.dataList[k].zhongzhi + "</td><td>" + data.dataList[k].jieguo + "</td></tr>"
|
}
|
$("#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: "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: "jisuanjingwei3.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
qidian: qidian,
|
zhongdian: zhongdian
|
},
|
success: function (data) {
|
var str = ""
|
for (var k = 0; k < 10 && k < data.dataList.length; k++) {
|
str += "<tr><td>" + data.dataList[k].qishi + "</td><td>" + data.dataList[k].zhongzhi + "</td><td>" + data.dataList[k].jieguo + "</td></tr>"
|
}
|
$("#nr").html(str);
|
$("#jieguo2").val(data.jieguo);
|
}
|
})
|
}
|
</script>
|
</body>
|
|
</html>
|
