Welcome to the satellite Phobos このページをアンテナに追加 RSSフィード

関連サイト [MARS] [DEIMOS] [bookmark]
カテゴリー [フランス語] [ロシア語] [アラビア語] [韓国語] [中国語] [タイ語] [インドネシア語] [ルーマニア語]
カテゴリー [自炊] [銭] [code] [他] [昔] [今]

2006-03-06液晶ビューカム撤退

[] Google Maps API入門(3)  Google Maps API入門(3) - Welcome to the satellite Phobos を含むブックマーク はてなブックマーク -  Google Maps API入門(3) - Welcome to the satellite Phobos

http://www.geocities.jp/poemura/lifemap.html

解説(1)id:plank:20060218
解説(2)id:plank:20060220

今回、新たに作成した関数の解説

    function createIcon(point, msg, desc) {
        var marker = new GMarker(point);

        GEvent.addListener(marker, "click", function(){
            var details = "x = " + point.x;

            details += ", y = " + point.y + "<br>";
            details += msg + "<br>" + desc;
            document.getElementById('nobaloon').innerHTML = details;
        });
        return marker;
    }
  • Google Maps API GMarkerクラスのオブジェクトmarkerを生成。
  • markerをクリックした時の処理を定義(関数をリスナーに登録)。XMLから読み出した、そのマーカーに関する情報をdetailsにHTMLで書き出し、DIV「nobaloon」に表示する。

関数リテラル

GEvent.addListener()の中で、リスナーに登録する関数の中身を引数の中に直接書いている。関数の中身だけで、関数名が無い。function(){......}で関数リテラルが書ける、というのは関数型プログラミング言語の「関数型データ」に相当。Lispのlambda式に対応する。

    function onloadXML(obj) {
        var resp = obj.responseXML;
        var xmlDoc = resp.documentElement
        var places = xmlDoc.getElementsByTagName("point");
        for(var i=0; i<places.length; i++) {
            var lon = parseFloat(places[i].getAttribute("lon"));
            var lat = parseFloat(places[i].getAttribute("lat"));
            var name = places[i].getAttribute("name");
            var desc = places[i].getAttribute("desc");

            var point = new GPoint(lon, lat);
            var marker = createIcon(point, name, desc);
            map.addOverlay(marker);
        }
    }

一番メインの処理を行っている所。

  • XMLHttpRequestで返って来たXMLをparseする。以下をpointの数だけ行う。
  • 「point」のデータを取得。
  • 得られたデータでcreateIcon()を行い、GMarkerクラスのインスタンスを得る。
  • マーカーを地図の上に重ねて表示

動作中の処理

  • GEventのリスナー(イベントハンドラ)がマウスイベントを監視。

markerをクリックした時→情報をDIV「nobaloon」に表示

残りの処理は推定になるが

  • GMap地図をドラッグした時→地図をスクロールし、地図表示範囲内にあるmarkerを表示
  • コントローラをクリックしたりドラッグしたり→適切な処理

今後の改良案

  • XMLをやめてJSONにすると軽くなるという噂
  • 現在の表示領域内にあるpointの地名リストを表示
    はてなマップの機能)
  • GMarkerクラスやGIconクラスを継承して、マーカーに機能追加

2006-02-20youtubeでR-1の博多華丸を見た

[] Google Maps API入門(2)  Google Maps API入門(2) - Welcome to the satellite Phobos を含むブックマーク はてなブックマーク -  Google Maps API入門(2) - Welcome to the satellite Phobos

id:plank:20060218 の続き。ajaxの初歩を。

http://www.geocities.jp/poemura/lifemap.html

準備前半

Javascriptの部分を除くと、XHTMLのbodyの中身はこれだけ。DIV「map」の部分にajaxな地図を表示。クリックしたマーカーが示す地点の情報をDIV「nobaloon」に表示する。

  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <div id="nobaloon"></div>
  </body>

ヘッダ中のJavascriptでGoogle Maps APIを呼び出し。

    <script src="http://maps.google.com/maps?file=api&v=1
        &key=xxxxxxxxxxxxxxxxxxxxxxx" 
        type="text/javascript">
    </script>

keyはGoogle内のページでもらう。

準備後半

今回、新たに作成した関数は

  • onloadXML(obj)
  • createIcon(point, msg, desc)

それらの関数の定義を除いた骨組みのソースは

    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(67.5, 28.3), 15);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

    var request = GXmlHttp.create();
    request.open("GET", "lifemap.xml", true);
    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            onloadXML(request);
        }
    }
    request.send(null);

    //]]>
    </script>

コードはCDATA[]内に埋め込む

XHTMLの文書内にJavascriptのコードを書く時には、コードの中身がXMLのマークアップと誤認識されない様に

    <![CDATA[ ......... ]]>

の中に埋め込む。

GMapクラスのオブジェクト生成

    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(67.5, 28.3), 15);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
  • Google Maps APIに含まれるGMapクラスのオブジェクトmapを生成。
    DIV「map」に地図を出力する
  • 初期画面の設定。東経67.5° 北緯28.3度の地点を中心に、Zoomレベル15で
  • 画面左にある、東西南北移動+拡大縮小コントローラを追加
  • 画面右上、「マップ」「サテライト」「デュアル」のコントローラを追加

GXmlHttpクラスのオブジェクト生成

    var request = GXmlHttp.create();
    request.open("GET", "lifemap.xml", true);
    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            onloadXML(request);
        }
    }
    request.send(null);
  • Google Maps APIに含まれるGXmlHttpクラスのオブジェクトrequestを生成

ajaxの非同期通信で使うXmlHttpRequestインスタンスをここで生成。ブラウザによって使うクラスがまちまちで、ActiveXObjectだったり、XMLHttpRequestだったりするので、GoFデザインパターンのFactoryMethodを使って吸収。create()メソッドでオブジェクト生成。

  • HTTP requestの内容を設定。データファイル「lifemap.xml」のGET
  • HTTP通信が完了した時の処理を定義
    XMLファイルの受信が完了した時はonloadXML()を実行

readyStateの返り値 http://jsgt.org/ajax/ref/readystate/readystate.htm 参照

status内容
0UNINITIALIZEDオブジェクトは作成されたが初期化がまだ。openは呼ばれていない
1LOADINGオブジェクトは作成されたが、sendが呼ばれていない
2LOADEDsendは呼ばれたものの、statusとヘッダがまだ来ない
3INTERACTIVEまだ通信中
4 COMPLETED 全てのデータを受信した

  • 実際にリクエストを送信
    ファイル名はURLに書いてしまったので、引数はnullで良い

準備が終わったので、次回はやっとメインの処理を説明できる。 id:plank:20060306

2006-02-18レギュラーの「あるある探検隊」初めて見た。面白い。

[] Google Maps API入門(1)  Google Maps API入門(1) - Welcome to the satellite Phobos を含むブックマーク はてなブックマーク -  Google Maps API入門(1) - Welcome to the satellite Phobos

本家サイトMarsGoogle Maps APIを実験中。

http://www.geocities.jp/poemura/lifemap.html

参考書はこれ。

高橋 登史朗「入門 Ajax」(ソフトバンククリエイティブ)2005/11/15発行

こんな仕様で作ってみました。

  • マーカーをクリックすると、地図の下に説明文が出る
  • Google Maps APIのバルーン表示は嫌いなので使わない
  • 別ファイルのXMLから
    「経度(lon)」「緯度(lat)」「場所名(name)」「説明(desc)」
    を読み込み
  • XSLTを使う程でも無いので使わない

XMLはこんな感じ。http://www.geocities.jp/poemura/lifemap.xml

<?xml version="1.0" encoding="utf-8" ?>
<points>
    <point lat="120.2037" lon="22.9921" name="度小月" desc="元祖 擔仔麵の店"/>
    <point lat="99.5653" lon="7.0989" name="Sukorn Beach Bangalow" desc="スコーン島"/>
</points>

ソースはこれ。解説は明日以降に。

http://www.geocities.jp/poemura/lifemap.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=utf-8">
    <script src="http://maps.google.com/maps?file=api&v=1
        &key=xxxxxxxxxxxxxxxxxxxxxxx" 
        type="text/javascript">
    </script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <div id="nobaloon"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(67.5, 28.3), 15);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

    var request = GXmlHttp.create();
    request.open("GET", "test.xml", true);
    request.onreadystatechange = function() {
        if(request.readyState == 4) {
            onloadXML(request);
        }
    }
    request.send(null);

    function createIcon(point, msg, desc) {
        var marker = new GMarker(point);

        GEvent.addListener(marker, "click", function(){
            var details = "x = " + point.x;

            details += ", y = " + point.y + "<br>";
            details += msg + "<br>" + desc;
            document.getElementById('nobaloon').innerHTML = details;
        });
        return marker;
    }

    function onloadXML(obj) {
        var resp = obj.responseXML;
        var xmlDoc = resp.documentElement
        var places = xmlDoc.getElementsByTagName("point");
        for(var i=0; i<places.length; i++) {
            var lon = parseFloat(places[i].getAttribute("lat"));
            var lat = parseFloat(places[i].getAttribute("lon"));
            var name = places[i].getAttribute("name");
            var desc = places[i].getAttribute("desc");

            var point = new GPoint(lon, lat);
            var marker = createIcon(point, name, desc);
            map.addOverlay(marker);
        }
    }

    //]]>
    </script>
  </body>
</html>

次回 id:plank:20060220

2000 | 05 | 08 | 10 |
2001 | 01 | 03 | 05 | 08 | 10 |
2004 | 07 | 10 | 12 |
2005 | 02 | 06 | 07 | 10 |
2006 | 02 | 03 | 09 |
2007 | 06 | 11 |
2008 | 04 | 09 | 10 | 12 |
2009 | 01 | 04 |
2010 | 08 |
2011 | 06 |
2012 | 04 |