年末からやっていたグーグルマップによる街区基準点の閲覧システムが完成しました。
http://www.totikaoku.org/
の街区基準点配置図をクリックしてください。
ソースを公開します。
var map;
function startUp() {
map = new GMap2( document.getElementById("mymap") );
map.enableContinuousZoom();
map.enableDoubleClickZoom();
map.setCenter( new GLatLng(34.758,134.85), 13 );
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
var msec = (new Date()).getTime();
httpObj = GXmlHttp.create();
httpObj.open("get","json/mark1.json?cache="+msec);
httpObj.onreadystatechange = function(){
if ((httpObj.readyState == 4) && (httpObj.status == 200))
addMarker();
}
httpObj.send(null);
function addMarker(){
map.clearOverlays();
var icon1 = new GIcon();
icon1.image ="image/marker01.gif";
icon1.iconSize =new GSize(20,18);
icon1.iconAnchor = new GPoint(10,18);
icon1.infoWindowAnchor = new GPoint(10, 0);
var icon2 = new GIcon();
icon2.image ="image/marker02.gif";
icon2.iconSize =new GSize(20,18);
icon2.iconAnchor = new GPoint(10,18);
icon2.infoWindowAnchor = new GPoint(10, 0);
var icon3 = new GIcon();
icon3.image ="image/marker03.gif";
icon3.iconSize =new GSize(20,18);
icon3.iconAnchor = new GPoint(10,18);
icon3.infoWindowAnchor = new GPoint(10, 0);
var icon4 = new GIcon();
icon4.image ="image/marker04.gif";
icon4.iconSize =new GSize(20,18);
icon4.iconAnchor = new GPoint(10,18);
icon4.infoWindowAnchor = new GPoint(10, 0);
eval("var pointData = "+httpObj.responseText);
for (var i=0; i<pointData.point.length; i++){
var marker=makeMarker(pointData.point[i].lat, pointData.point[i].lng,pointData.point[i].htmlfile,pointData.point[i].ic);
map.addOverlay(marker);
}
}
function makeMarker(lat,lng,html,icon1){
var point = new GLatLng(lat,lng);
var mk = new GMarker(point,icon1);
GEvent.addListener( mk , "click", function (){
mk.openInfoWindowHtml( html );
});
return mk;
}
}
onload = startUp;
onunload= GUnload;
以上がｊａｖａスクリプトのファイル
{ point: [
{"lat":34.○○,"lng":134.○○,"htmlfile": "1001A<br>街区三角点<br>加古川市街区基準点測量第1地区","ic":icon2 },
]
}
以上がｊｓｏｎ形式のデータです。
ｈｔｍｌは
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>加古川 街区基準点</title>
<script src="http://maps.google.com/maps?file=api&v=2.67&key=ここにｋｅｙ"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="○○/○○.js"
charset="utf-8"></script>
<style type="text/css">
#head {
margin-bottom: 10px;
border: 1px solid #aaa68a;
padding: 5px 10px 5px 10px;
background-color: #FFFFCC;
}
#breadCrumbsNavi {
margin-bottom: 10px;
}
#breadCrumbsNavi a , #breadCrumbsNavi span {
font-size: 80%; color: #333333;
}
#breadCrumbsNavi a:hover {
color: #FF9900; text-decoration: underline;
}
#foot {
margin: 10px 0 10px 0;
border: 1px solid #aaa68a;
padding: 10px;
font-size: 90%;
line-height: 125%;
background-color: #FFFFCE;
}
</style>
</head>
<body BACKGROUND=" " >
<div id="head">
<p><strong>【加古川市】街区基準点配点図</strong>
</p>
マークをクリックすると点名が表示されます<br>
地図を左ダブルクリックで拡大・右ダブルクリックで縮小します
<div id="mymap" style="height: 600px"></div>
<div id="foot">
<strong>凡例</strong> <img src="image/marker01.gif">一級～三級基準点 <img src="image/marker02.gif">街区三角点 <img src="image/marker03.gif">街区多角点 <img src="image/marker04.gif">街区節点
</div>
</body>
</html>
となってます。
ｊｓｏｎデータはエクセルでｃｓｖを読み込んで、ＣＯＮＣＡＴＥＮＡＴＥ関数で文字列を作成してテキストエディタに貼り付けました。
詳しくは、「ＧｏｏｇｌｅＥａｒｔｈ コンテンツ＆アプリ作成ガイドブック」の２０ページに載ってます。
こんなところです。
吹き出しから成果表や点の記を参照することも可能です。
ｊｓｏｎのｈｔｍｌｆｉｌｅの後に
＜a href=￥”http://www.totikaoku.org/map/○○/○○.PDF￥”target=￥”_blank￥”＞成果表＜/a＞
（一部全角で打ってます）のタグを入れると関連づけが出来ます。
二重引用になるので￥を入れるのが秘けつです。
街区基準点データーを管理したい方は参考にしてください。
