-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathgmapsreverse.html
96 lines (83 loc) · 2.18 KB
/
gmapsreverse.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
<html>
<head>
<script>
insertImg = function(top,left,zoom){
if(top>0 && left>0){
var el = document.createElement('img');
el.style.position = 'absolute';
var offset = 0;
el.style.top = (top-LatLng[0] - offset)*256+'px';
el.style.left = (left-LatLng[1] - offset)*256+'px';
el.src = "http://mt1.google.com/vt/x="+left+"&y="+top+"&z="+zoom;
el.alt = "loading...";
container.appendChild(el);
}
}
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
id = document.getElementById.bind(document);
var compute = function(){
container.innerHTML = '';
num = 0;
sign = 1;
step = 1;
LatLng=[parseInt(id('lat').value),parseInt(id('lng').value)];
Nlat = LatLng[0];
Nlng = LatLng[1];
zoom = parseInt(id('zoom').value);
console.log(Nlat,Nlng,zoom);
for(var bndRnd = 0; bndRnd<10;bndRnd++){
for(var x1 = 1; x1<bndRnd;x1++){
insertImg(Nlat,Nlng,zoom)
Nlat=(Nlat+1*sign);
num++;
}
for(var x2 = 1; x2<bndRnd;x2++){
insertImg(Nlat,Nlng,zoom);
Nlng=(Nlng+1*sign);
num++;
}
sign=-sign;
}
}
window.onload = function(){
window.container = id('canvas');
compute();
id('lat').oninput = compute;
id('lng').oninput = compute;
id('zoom').onchange = compute;
};
</script>
<style>
#canvas{
width:100%;
height:100%;
overflow:hidden;
}
</style>
</head>
<body><div class="controls" style="position:fixed;z-index:1000;right:0px;top:0px;"><form>
<input id="lat" type="number"
min="0"
step="1"
value="3"
style='width:100px' > LAT<input id="lng" type="number"
min="0"
step="1"
value="3"
style='width:100px' > LNG
<input id="zoom" type="range"
min="2"
max="21"
step="1"
value="3"
style='width:600px' > ZOOM<br />
</form></div><div id="canvas"></div></body>
</html>