<html>
<head>
<meta charset="utf-8"/>
<title>日本地図</title>
<script src="jquery.js"></script>
<script src="svgpaint.js"></script>
<script src="fusiontable.js"></script>
<script src="table.js"></script>
</head>
<body onload="fusiontable()">
<input type="button" value="検索" onClick="table()" />
<p id="memo">準備中</p>
</body>
</html>
var c=new Array();
var x1=new Array();
var x2=new Array();
var y1=new Array();
var y2=new Array();
var number;
function fusiontable() {
var query = "SELECT * FROM " +
'1PKsZgNEPsgipywXhlLtE4GxH9fA6hl0RBDdjUO8';
var encodedQuery = encodeURIComponent(query);
var url = ['https://www.googleapis.com/fusiontables/v1/query'];
url.push('?sql=' + encodedQuery);
url.push('&key=AIzaSyAH0WCAXRIdHdbI-6bnMSN4kVDDZZmGyqY');
url.push('&callback=?');
sx=0;
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
for (var i in rows) {
sx=sx+1;
c[sx]= rows[i][0]; x1[sx]= rows[i][1];
x2[sx]= rows[i][2];
y1[sx]= rows[i][3];
y2[sx]= rows[i][4];
}
number=sx;
$("#memo").text("準備完了");
}
});
}
px=new Array();
py=new Array();
w1=new Array();
h1=new Array();
function table(){
var maxx,minx,maxy,miny;
var s;
maxx=0;
minx=999;
for(s=1;s<number+1;s++){
if(x1[s]>maxx)maxx=x1[s];
if(x1[s]<minx)minx=x1[s];
}
maxy=0;
miny=999;
for(s=1;s<number+1;s++){
if(y1[s]>maxy)maxy=y1[s];
if(y1[s]<miny)miny=y1[s];
}
var xx,yy;
xx=maxx-minx;
yy=maxy-miny;
for(s=1;s<number+1;s++){
px[s]=500*(x1[s]-minx)/xx;
py[s]=500*(y1[s]-miny)/yy;
}
for(s=1;s<number+1;s++){
px[s]=500*(x1[s]-minx)/xx;
py[s]=500*(y1[s]-miny)/yy;
}
for(s=1;s<number+1;s++){
w1[s]=500*(x2[s]-x1[s])/xx;
h1[s]=500*(y2[s]-y1[s])/yy;
}
var sub=new svgpaint();
str="<svg>";
for(s=1;s<number+1;s++){
str=str+sub.rect(50+py[s],600-px[s],w1[s],h1[s],"blue");
}
str=str+"</svg>";
$("#memo").html(str);
}
最終更新：2013年12月22日 14:05
