-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdefault.html
149 lines (137 loc) · 6.39 KB
/
default.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地震离你有多近？</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/map.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.control.geocoder.css"/>
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/mainbuild.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes, user-scalable=no"/>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
(function(d) {
var config = {
kitId: 'ibt7ffz',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head>
<body>
<modal id="info-bar" class="info-bar-hide">
<span id="ico-info" class="ico-info"></span>
<span id="info" class="info-text">抱歉，您的浏览器不支持定位，请选择手动输入位置。</span>
</modal>
<!-- /-----Opener1-----/ -->
<modal id="interface1" class="interface-modal hide">
<div id="interface1_img" class="interface1-img"></div>
<span id="skip" class="skip">跳过</span>
<div id="interface1-text" class="interface-text text-center">
<span class="headline-2">地球上每天会发生<br>约 50 次地震*</span>
<span class="caption">*数据来源：美国国家地震信息中心</span>
</div>
</modal>
<!-- /-----Opener2-----/ -->
<modal id="interface2" class="interface-modal hide">
<div id="interface1_img" class="interface1-img"></div>
<span id="skip" class="skip">跳过</span>
<div id="interface1-text" class="interface-text text-center">
<span class="headline-2">从有记录以来<br>中国最大的三次地震<br>共造成350,421人死亡*</span>
<span class="caption">*数据来源：美国国家地震信息中心</span>
</div>
</modal>
<!-- /-----Search-----/ -->
<modal id="mainpage" class="interface-modal">
<div id="earthmap" class="earthmap"></div>
<div id="mainpage" class="mainpage">
<span class="headline-1 mainpage-headline">地震离你<br>有多近？</span>
<div class="h-100 map-container flex-fill">
<div class="container-fluid h-100">
<div class="row h-100" id="map-container">
<div class="col w-100" id="map"></div>
</div>
</div>
</div>
</div>
<script type="module">
import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";
import notebook from "https://api.observablehq.com/@leeyee1997/world-tour.js";
Runtime.load(notebook, (cell) => {
if (cell.name === "canvas") {
return {
fulfilled: (value) => {
document.getElementById("earthmap").appendChild(value);
}
};
}
});
</script>
</modal>
</body>
<script src="js/getLocation.js"></script>
<script src="js/earthquakeCalculater.js"></script>
<!-- <script src="https://maps.openquake.org/static/js/dist/jquery.min.js"></script> -->
<script src="https://maps.openquake.org/static/js/dist/leaflet.js"></script>
<script src="https://maps.openquake.org/static/js/dist/leaflet.hash.js"></script>
<script src="https://maps.openquake.org/static/js/dist/leaflet.control.geocoder.js"></script>
<script src="js/jquery.pjax.js"></script>
<script>
//地图搜索框
var map = L.map('map', {
fullscreenControl: false,
center: ['40', '120'],
zoom: 4,
zoomControl: false,
maxZoom: 4,
minZoom: 4,
singleClickTimeout: 250
});
var hash = new L.Hash(map);
// geocoder搜索框
var geocoder = L.Control.geocoder({
defaultMarkGeocode: true,
collapsed: false,
placeholder: "输入地址，或点击图标自动定位",
errorMessage: "没有找到你的城市",
showResultIcons: true,
suggestMinLength: 1
});
geocoder.on('markgeocode', function(e) {
var pointLatLng = e.geocode.center; //地理坐标
var url = "map.html" + "#4/" + pointLatLng.lat + "/" + pointLatLng.lng;
console.log();
$.pjax({
url: url,
container: '#mainpage'
});
})
.addTo(map);
</script>
<script>
$("#get-location").click(getLocation);
/*Fixed Earth*/
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
$("modal").css({"height":windowHeight, "width":windowWidth});
/*show content*/
$(document).ready(function(){
$("#interface2").hide();
$("#mainpage").hide();
$("#interface2").delay(2000).fadeIn(1000);
$("#mainpage").delay(5000).fadeIn(1000);
});
/* Device Decting */
if (windowHeight >= 812) {
$("earthmap").css({"height":windowHeight*0.55, "width":windowWidth});
} else if (568 < windowHeight < 812) {
$("earthmap").css({"height":windowHeight*0.22, "width":windowWidth});
} else {
$("earthmap").css({"height":windowHeight*0.2, "width":windowWidth});
}
</script>
</html>