ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。以前に、地図を目次にするウィジェットの作り方で本格的な地図の利用法を掲載しましたが、今回は違う仕組みで簡単な地図目次を作ってみます。仕組みここでは、canvas要素にaddEventListenerを用いてマウスイベントを取り付けて、クリック位置を管理します。地図の所定位置をクリックするとその県都の情報が表示されるものです。地図を目次にする手順1基準となる地図を用意する例として最後の方に示す関東地方の地図(KantoArea1.png)を考えます。地図は自然な形で画面に収まるサイズが望ましいです。小さい方が更に引き立つと思われるますが、他に表示するものがないので横550px、縦520pxにしました。➁クリック有効領域を地図にマークする県や都の地図上の形は複雑ですが、長方形で代表することにします。下のような地図(KantoArea2.png)を作成します。オリジナルな地図(KantoArea1.png)を残しておくことが大切です。3補助線付き地図とクリック位置が表示されるJavaScriptコードを作成します。このサンプルコードは栃木県から群馬県まで時計回りに、黄色に象られた長方形の左上と右下を順にクリックして、領域の範囲をテーブル化するためだけにあります。入力を失敗したときは再読み込みをしてやり直します。src="http://aidesign.lolipop.jp/wp-content/uploads/2015/09/select06.mp3"></audio></html>4上の関東地方地図の右にデバッグ情報として出力されたクリック位置の値を参照してpointテーブルを編集します。5次に、これまでの開発用コードを保存し、補助線なしの地図に切り替え、クリックされた都県を認識する目次の機能を追加します。6デバッグ用ステートメントを削除するかコメント文にします。使わなくなったmesgテーブルや変数mなども削除します。完成版サンプルコードを以下に掲載します。27行の三項演算子で東京では都を、その他では県が付加されます。33行のreturnは省力できますが、29行のreturnを省略すると正しく動作しません。src="http://aidesign.lolipop.jp/wp-content/uploads/2015/09/select06.mp3"></audio></html>さいごに多角形で象られた複雑な領域をクリックして制御するデータを作成するツールが出回っていますが、ここでは単純な長方形だけをサポートしています。長方形だけでは県境で誤差が出て正確さを欠きますが、それでも県庁所在地付近では正確に都県を選択することが可能です。簡単な仕組みを理解して高みを目指しましょう。詳細な都県情報を出力するには、上記コードの28行を拡張して都県が運営するホームページにジャンプするように編集します。コメントをキャンセル下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。コメント名前メールアドレス上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。