記事を書く度にお久しぶりですとか言ってる気がするｗ
最近pythonとかmelとかをガリガリ書いていたので
一年と三カ月ぶりにHTMLとかCSSとかJava Scriptとか触ってみます。
といっても過去に作った簡単なプログラムを公開するだけなんですけどね（手抜き）
やりたいことはgoogle map上でクリックしたところにマーカーを立てて
経度、緯度を取得して表示 → csvファイルとして書きだし
とまぁこんな感じです。
ちなみにcsvファイルってのはカンマ（ , ）とかで情報を区切るだけで
エクセル等のソフトでも枠を区切って認識してくれるファイル形式です。
まぁ詳しくはぐぐってください。
今回はソースコードの解説などは特にしません。←
（べつに久しぶりに弄ったら結構忘れてて解説する自信がないとかではないですよ；；）
まぁ結構この手の内容は一文づつググったらかなりの量の解説がヒットしますので
まぁ詳しくはぐぐってください。ｗ
///////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8">
</script>
<script type="text/javascript">
//<![CDATA[
var map;
var markersArray = [];
var flag = 0;
function init() {
var latlng = new google.maps.LatLng(39, 138);
var opts = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
map = new google.maps.Map(document.getElementById("map"), opts);
google.maps.event.addListener(map, 'click', mylistener);
}
function mylistener(event) {
if(flag == 0){
document.getElementById("left_up_lat").innerHTML = event.latLng.lat();
document.getElementById("left_up_lng").innerHTML = event.latLng.lng();
}else {
document.getElementById("right_under_lat").innerHTML = event.latLng.lat();
document.getElementById("right_under_lng").innerHTML = event.latLng.lng();
}
var latlng=new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
var marker = new google.maps.Marker({position:latlng, map:map});
markersArray.push(marker);
}
function writeText() {
var fs = new ActiveXObject("Scripting.FileSystemObject");
var outf = fs.CreateTextFile("outText.csv", true);
outf.Write(document.getElementById("file_name").value + "," + document.getElementById("left_up_lat").innerHTML + "," + document.getElementById("left_up_lng").innerHTML + "," + document.getElementById("right_under_lat").innerHTML + "," + document.getElementById("right_under_lng").innerHTML);
outf.Close();
}
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function leftUp() {
flag = 0;
}
function rightUnder() {
flag = 1;
}
//]]>
</script>
</head>
<body onload="init()">
<div id="map" style="height:560px"></div>
<table border="1" cellspacing="2" width="100%">
<tr><th>ファイル名</th><th><button onclick="leftUp()" type=button>LEFT UP</button></th><th><button onclick="rightUnder()" type=button>RIGHT UNDER</button></th></tr>
<tr><th rowspan="2"><input type="text" size=30 value="file name" id="file_name"></th><th id="left_up_lat"></th><th id="right_under_lat">
<tr><th id="left_up_lng"></th><th id="right_under_lng"></th></tr>
</table>
<form>
<input type="button" value="マーカーを削除" onclick="clearOverlays()" /><button onclick="writeText()" type=button>書きこみ</button><br>
</form>
</body>
</html>
///////////////////////////////////////////////////////
とまぁこんな感じなんですが
これを書いてた頃はIEユーザーだったのでActiveXObjectという
IEでファイルを書きだすやつを使ってたんですが
現状IEユーザーが減っちゃったのと、バージョンアップによって
IEでもたぶん使えないと思います←
かきだすwriteText()の中身だけ書き変えたら動くはずですが
使うタイミングがないので使いたい方は書き変えて使って下さい。
firefoxやchromeなどでも確かそんなやつがあったと思います。
まぁ一応コピーして.htmlで保存すればそれ以外は動くはずです。たぶん。
はい、まぁ今回はかなり雑でしたがこんな感じで終わりますｗ
今後も雑な感じで過去のスクリプトとか投下するかもしれませんが悪しからず。
