s ICC ONLINE | アーカイヴ | 2007年 | ICC マッシュアップ・アート・コンテスト | APIサンプル集
ICC


サンプルをダウンロード(184KB)

クリックした地点(都道府県)で放映されているテレビ情報のRSSを取得するサンプルです.
なお,このサンプルでは地図の座標から都道府県名を取得する際,独立行政法人 農業・食品産業技術総合研究機構の逆ジオコーディングサービスを使用しています.
http://refits.cgk.affrc.go.jp/tsrv/jp/rgeocode.html


1. 準備する

goomap apiのキーを取得します.
http://map.api.goo.ne.jp/icc/authkey.htmlへアクセスし,「配信対象となるサイトのURLを入力してください.」の下のテキストにサーバのURLを入力し,キーを生成します.生成された認証キーは控えておいてください.

次に,地図APIを使用するにあたり,HTMLで読み込むようにします.
<script src="//map.api.goo.ne.jp/key/authkey_contents.php?[認証キー]&enc[文字コード]" type="text/JavaScript">
[認証キー] 取得した認証キー
[文字コード] 使用する文字コード



2. 地図を操作する

地図の操作のみを行いたい場合はこのドキュメントだけでよいですが,RSSを取得する方法は「PHPを使用したRSSの取得方法」,「JavaScriptを使用したRSSの取得方法」を参照してください(同様の方法でRSSを取得しています).

  • 地図を作成する:
地図を作成するには,GoomapMapMainControlオブジェクトを生成します.

// 地図の生成
var mapObj = new GoomapMapMainControl(
	goomapDomUtil.GetElementsBiId(mapName), // DIV要素名
	Width, //幅
Hieght, //高さ
    );
// 初期位置と表示のセット
mapObj.refreshView(new GoomapPoint


  • コントローラを作成する:
地図を操作するコントローラ(縮尺を変更など)を作成するには,addControllerメソッドで追加していきます.

// 縮尺変更のスライダーを作成する
mapObj.addController(new 
GoomapSliderMainBar(GoomapDOMUtil.getElementsById(DIV要素名)));

// ツールバーを作成する
mapObj.addController(new 
GoomapToolsBar(GoomapDOMUtil.getElementsById(DIV要素名)));


  • イベントリスナーを定義する:
このサンプルではクリックしたときにRSSを取得,ポップアップの作成を行うためにクリックイベントに対するリスナーを定義しています.

// イベントリスナーの定義
mapObj.attachEventListener("click", map_Click, null); // クリック

「map_Click」という関数がクリックされた後に呼び出されるようになります.

地図作成の最後に,visibilityプロパティをvisible(可視)に変更します.

mapObj.visibility("visible");


  • イベントを処理する:
イベントを処理するために先ほどリスナーを作成したmap_Click関数を作成します

function map_Click(State, Point, Param){

}


  • 座標系の変更:
地点の座標をWGS84形式に変更します.

// 1/1000秒形式から度形式(WGS84)へ変換
var deg_x = GoomapTransUnit.trans_ms2deg(Point.x); // 緯度
var deg_y = GoomapTransUnit.trans_ms2deg(Point.y); // 経度


  • 吹き出しを作成する:
GoomapTipsParamクラスから吹き出しを作成後,地図の指定位置に追加しています.
このサンプルでは地図移動等で自動的に吹き出しは消えるため記述していませんが,手動で吹き出しを消したい場合は,地図インスタンスのcloseTipsWindow()メソッドを呼び出すと消えます.

// 吹き出しを作成
var tip = new GoomapTipsParam('tip_pos', 0, 0, true, true);
tip.attachHTMLText('この地点の情報を取得しています');

map.openTipsWindow(Point, tip);	// 地図上に表示