-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path坐标计算器.html
130 lines (122 loc) · 4.06 KB
/
坐标计算器.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地球村（1：1000）坐标计算器</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f4f8;
color: #333;
}
.container {
width: 80%;
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-top: 5px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
#quick-locate-button {
display: none;
margin-top: 15px;
background-color: #007BFF;
}
#quick-locate-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>坐标计算器</h1>
<div class="form-group">
<label for="latitude">纬度 (°N):</label>
<input type="number" id="latitude" placeholder="请输入现实地点纬度，例如：64.1835（南纬为负数）" step="any">
</div>
<div class="form-group">
<label for="longitude">经度 (°W):</label>
<input type="number" id="longitude" placeholder="请输入现实地点经度，例如：51.7216（西经为负数）" step="any">
</div>
<button onclick="calculateCoordinates()">计算Minecraft坐标</button>
<div class="result" id="result"></div>
<button id="quick-locate-button" onclick="quickLocate()">快速定位</button>
</div>
<script>
let computedX, computedZ;
function calculateCoordinates() {
// 获取输入值
const latitude = parseFloat(document.getElementById('latitude').value);
const longitude = parseFloat(document.getElementById('longitude').value);
// 检查输入是否有效
if (isNaN(latitude) || isNaN(longitude)) {
alert("请输入有效的纬度和经度！");
return;
}
// 计算X坐标（经度）
computedX = ((longitude + 180) / 360) * 43008 - 21504;
// 计算Z坐标（纬度）
computedZ = ((-latitude + 90) / 180) * 21504 - 10752;
// 显示结果
const resultElement = document.getElementById('result');
resultElement.innerHTML = `
<h3>计算结果</h3>
<p><strong>X坐标：</strong>${Math.round(computedX)}</p>
<p><strong>Z坐标：</strong>${Math.round(computedZ)}</p>
`;
// 显示“快速定位”按钮
document.getElementById('quick-locate-button').style.display = 'block';
}
function quickLocate() {
// 构建URL并跳转
const x = Math.round(computedX);
const z = Math.round(computedZ);
const url = `http://earthvillage.top:33020/#world;flat;${x},64,${z};5`;
window.location.href = url;
}
</script>
</body>
</html>