root/lang/javascript/gmapcalc/test.html @ 35896

Revision 25796, 4.1 kB (checked in by gyuque, 4 years ago)

updated map tile version

  • Property svn:mime-type set to text/html
Line 
1<?xml version="1.0" encoding="utf-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
4        <head>
5                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6                <meta http-equiv="Content-Script-Type" content="text/javascript" />
7                <title>gmapcalc</title>
8
9                <style type="text/css">
10.err {
11        font-style: normal;
12        color: #d00;
13}
14
15#mapout {
16        position: relative;
17}
18
19#mapout div {
20        font-size: 0px;
21}
22
23#mapout img {
24        position: absolute;
25        top: 0;
26        left: 0;
27}
28
29                </style>
30
31                <script type="text/javascript" src="gmapcalc.js"></script>
32                <script type="text/javascript">
33var currentLayer = 0;
34
35function degToRad(d) {return d*0.01745329251994;}
36function radToDeg(r) {return r/0.01745329251994;}
37
38function inputToArray(id)
39{
40        var e = document.getElementById(id);
41        if (!e) return null;
42
43        var s = e.value.replace(/\s+/g, '');
44        var arr = s.split(',');
45        arr[0] -= 0;
46        arr[1] -= 0;
47
48        if (isNaN(arr[0]) || isNaN(arr[1]))
49                return null;
50
51        return arr;
52}
53
54function arayToInput(arr, id)
55{
56        var e = document.getElementById(id);
57        if (!e) return;
58
59        e.value = arr[0]+', '+arr[1];
60}
61
62function cvXY()
63{
64        try {
65                var xy = inputToArray("XY");
66                if (!xy)
67                        throw "Invalid input";
68
69                showMapTile(xy[0], xy[1]);
70
71                var ltlg = GoogleMapsCalc.XYtoLatLng(xy[0], xy[1]);
72                ltlg[0] = radToDeg(ltlg[0]);
73                ltlg[1] = radToDeg(ltlg[1]);
74
75                arayToInput(ltlg, "LL");
76        } catch(e) {
77                outError(e);
78                return;
79        }
80
81        outMessage("");
82}
83
84function cvLL()
85{
86        var xy;
87        try {
88                var ltlg = inputToArray("LL");
89                if (!ltlg)
90                        throw "Invalid input.";
91
92                ltlg[0] = degToRad(ltlg[0]);
93                ltlg[1] = degToRad(ltlg[1]);
94                xy = GoogleMapsCalc.LatLngToXY(ltlg[0], ltlg[1]);
95
96                arayToInput(xy, "XY");
97        } catch(e) {
98                outError(e);
99                return;
100        }
101
102        showMapTile(xy[0], xy[1]);
103        outMessage("");
104}
105
106function outError(msg)
107{
108        outMessage('<em class="err">'+msg+'</em>');
109}
110
111function outMessage(msg)
112{
113        document.getElementById("message").innerHTML = msg;
114}
115
116function showMapTile(x, y)
117{
118        var out = document.getElementById("mapout");
119
120        var tiledata = GoogleMapsCalc.calcTileData(x, y, 7, 0);
121        var Murl = "http://mt1.google.com/mt?n=404&v=ap.88&x="+tiledata.tile_index.x+"&y="+tiledata.tile_index.y+"&zoom="+tiledata.tile_zoom;
122
123        tiledata = GoogleMapsCalc.calcTileData(x, y, 7, 1);
124        var Surl = "http://khm2.google.co.jp/kh?n=404&v=29&t=" + tiledata.tile_path;
125
126        out.innerHTML = '<img src="'+Murl+'" /><img src="'+Surl+'" />';
127
128        var ox = tiledata.offset.x;
129        var oy = tiledata.offset.y;
130
131        var p = document.createElement("div");
132        p.style.cssText = "position: absolute; background: #f00; width: 5px; height: 5px;";
133        p.style.left = (ox-2)+"px";
134        p.style.top = (oy-2)+"px";
135
136        out.appendChild(p);
137
138        p = document.createElement("div");
139        p.style.cssText = "position: absolute; background: #f00; width: 41px; height: 1px;";
140        p.style.left = (ox-20)+"px";
141        p.style.top = oy+"px";
142
143        out.appendChild(p);
144
145
146        p = document.createElement("div");
147        p.style.cssText = "position: absolute; background: #f00; width: 1px; height: 41px;";
148        p.style.left = ox+"px";
149        p.style.top = (oy-20)+"px";
150
151        out.appendChild(p);
152        toggleLayer(currentLayer);
153}
154
155function toggleLayer(layer)
156{
157        currentLayer = layer;
158        var out = document.getElementById("mapout");
159        if (!out) return;
160        out = out.childNodes;
161        if (!out[0]) return;
162        if (!out[0].style) return;
163
164        out[1 - layer].style.display = "none";
165        out[layer].style.display = "";
166}
167
168                </script>
169        </head>
170
171        <body>
172                <p>
173                緯度経度:<br />
174                lat, lng: <input type="text" id="LL" size="64" value="34.76, 135.53" /><button onclick="void(cvLL())">↓変換</button>
175                </p>
176                <p>
177                Google Mapsの地図画像上の座標 左上(0,0)-右下(1,1): <br />
178                x, y: <input type="text" id="XY" size="64" value="0.8765, 0.3969" /><button onclick="void(cvXY())">↑変換</button>
179                </p>
180                <p id="message">
181                </p>
182                <p><a href="javascript:void(toggleLayer(0));">地図</a>|<a href="javascript:void(toggleLayer(1));">衛星</a></p>
183                <div id="mapout"></div>
184        </body>
185</html>
Note: See TracBrowser for help on using the browser.