WebHi
▲Top
App

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

自作スクロールマップAPI ver.2

どういうものか？

古いバージョンはこちら

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

提供される機能は？

  • マップのフリースクロール
  • 情報の書き込み、表示
  • クリックイベントなどの登録

ダウンロード

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

導入方法

まず、地図の表示枠を作ります。<div id="gm"></div>などを適当な場所に配置してください。中身は空にしておいてください。

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

<script language="javascript" type="text/javascript" src="api/prototype.js"></script>
<script language="javascript" type="text/javascript" src="api/gradmap2.js"></script>
<link rel="stylesheet" href="api/gradmap.css">

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

<script language="javascript" type="text/javascript">
    aa=new gradmap2($("gm")); //レイヤーのIDと一致させて
    //レイヤ0の設定
    aa.width[0]=300;
    aa.height[0]=300;
    aa.dbname[0]="database"; //データを保存したいときのみ指定
    aa.imgprefix[0]="pic/"
    aa.imgpostfix[0]=".jpg"
    aa.data[0]=new Array(
      "1-1:::1-2:::1-3",
      "2-1::::::2-3",
      ":::3-2:::3-3"
    );
    //レイヤ1の設定
    aa.width[1]=400;
    aa.height[1]=400;
    aa.imgprefix[1]="pic/"
    aa.imgpostfix[1]=".jpg"
    aa.data[1]=new Array(
      "1-1:::1-2:::1-3",
      "2-1::::::2-3",
      ":::3-2:::3-3"
    );
    //同様にいくつもレイヤを指定できます。

    aa.draw(); //最後に、地図の表示。
</script>

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

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

Shift+クリックで、書き込みができます。

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

gradmap2オブジェクトの詳細

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

  • width
  • height
  • data

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

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

  • draw();
    　地図を描画する。
  • changelayer(Number n)
    　レイヤnに移動する
  • moveto(Number n, Number i, Number j, Number x, Number y)
    　レイヤnのi行j列目の図、点(x,y)に移動する
  • addinfo(Number n, Number/String id, Number i, Number j, Number x, Number y, String html)
    　IDをidとしてレイヤnの i行j列目の図、点(x,y)にhtmlを書き込む
  • editinfo(Number n, Number/String id, Number i, Number j, Number x, Number y, String html)
    　IDがidの情報を、レイヤnの i行j列目の図、点(x,y)にhtml、に書き換える
  • delpoint(Number n, Number/String id)
    　IDがidの情報を削除する。
  • addinfojs, editinfojs, delinfojs
    　基本的には同じだが、データベースに書き込まないので、リロードすると消える。
  • getcenter(); returns Array("num"->n, "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を実行する。」を削除する。