WebHi
▲Top
App

twitter
ここをクリックしてロード
  

自作スクロールマップAPI

どういうものか？

自前の地図でスクロールマップを作るためのＡＰＩです。サンプルはこちら

提供される機能は？

  • マップのフリースクロール
  • 情報ウインドウの表示
  • マップの指定場所へ移動
  • マップの中心場所を取得
  • クリックイベントなどの登録

ダウンロード

どうぞ。zip圧縮してあります。

導入方法

まず、地図の表示枠を作ります。<div id="gradmap"></div>を適当な場所に配置してください。tableタグとかの中に入れるとバグるかもしれない(テストしてない)ので、<body>直下で使用してください。

次に、必要ファイルを読み込みます。次の4行を<div id="gradmap"></div>より後ろに挿入してください。ファイルパス(src="～"の部分)は必要に応じて変更してください。

<style type="text/css">@import url(api/gradmap.css);</style>
<script language="JavaScript" type="text/JavaScript" src="api/prototype.js"></script>
<script language="JavaScript" type="text/JavaScript" src="api/bytefx.js"></script>
<script language="JavaScript" type="text/JavaScript" src="api/gradmap.js"></script>

これに続いて、地図の表示スクリプトを記述します。

<script language="JavaScript" type="text/JavaScript">
_map=new gradmap(); //スクロールマップオブジェクトの作成

_map.width=300; //地図の1ピースの幅
_map.height=300; //地図の1ピースの高さ

_map.data.push("0-0.jpg:::0-1.jpg:::0-2.jpg:::0-3.jpg"); //地図の1行目
_map.data.push("1-0.jpg:::1-1.jpg:::1-2.jpg"); //地図の2行目
_map.data.push("2-0.jpg:::2-1.jpg::::::2-3.jpg"); //地図の3行目

_map.draw(); //地図の描画

_map.moveto(2,1,50,4); //地図の中心を2-1.jpgの(50,4)に移動
_map.addpoint(0,2,1,50,40,"<b>サンプル</b>です。");//地図の中心を2-1.jpgの(50,40)に情報ウインドウを表示
</script>

0-0.jpg 0-1.jpg･･･などは300×300サイズの地図画像で、あらかじめ用意しておきます。地図の無い部分にはF.jpgが読み込まれます。画像データはすべて./img/ 以下に入れておきます。

ブラウザでアクセスしてください。JavaScriptをONにするのを忘れずに。

上の例のサンプルはこちら。

gradmapオブジェクトの詳細

プロパティには以下の変数があります。

  • width(デフォルト：300)
  • height(デフォルト：300)
  • data

これらは、地図を描画する(drawメソッドを実行する)より前に設定しておく必要があります。dataの書式はサンプルに示したように従ってください。

メソッドは、以下のものが使用可能です。

  • draw();
    　地図を描画する。
  • addpoint(Number id,Number i,Number j,Number x,Number y,String html);
    　情報id(重複不可)で、内容htmlをi行j列目の地図、点(x,y)に書き込む。idが重複しているときは新しいものが上書きされる。
  • delpoint(Number id);
    　情報idの点を削除する。
  • moveto(Number i,Number j,Number x,Number y);
    　 i行j列目の地図、点(x,y)に中心を移動させる。
  • getcenter(); returns Array("i"->i, "j"->j, "x" ->x, "y"->y);
    　中心位置を返す。
  • eventlisten(String event,function func);
    　「地図がevent("click","keypress" etc...)されたとき、funcを実行する。」を登録する。
  • eventstop(String event,function func);
    　「地図がevent("click","keypress" etc...)されたとき、funcを実行する。」を削除する。

eventlistenで、funcにgetcenterを設定するとタイミングに依存して中心位置が正しく表示されないことがあるようです…。