SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マップサーチ]

マップサーチ

機能

日本地図の画像をクリックすると、そのマウスの位置によって県名など登録した情報をテキストボックスに表示させるスクリプトです。住所入力の際にプルダウンメニュー（リストボックス）から選択させる方法よりもビジュアルで、選択しやすいというメリットを持っています。

利用方法

HEAD部分にスクリプトを記述します。フォームをBODY部に記述します。

地図のそれぞれの都道府県に対応する情報を配列変数に予め設定します。設定には画像ソフトなどを用い、ピクセル単位で調整すると良いでしょう。ここで使用しているサンプル地図は「http://aoki2.si.gunma-u.ac.jp/ （地図を描く）」より頂き、改変したものです。再配布に関しても認めていただきましたので、ご自由にお使い下さい。

地図の画像の設定

IMG要素に（日本）地図を設定します。ここでは、「src="image/japanmap.gif"」としています。このIMG要素に対して、DIV要素でId属性の指定（iL1）とClass属性の指定（map）を指定します。名前の変更は自由に出来ますが、それぞれレイヤー名、スタイル名を同時に変更しなければなりません。

地図情報の設定

配列変数「prefData」に格納します。関数「iniData」に格納する部分が存在します。ここでは、都道府県名、地方名とその地図上の座標４点の６つの情報を格納できるようになっています。

prefData[0][i]：都道府県名
prefData[1][i]：地図上の座標左上(X1)
prefData[2][i]：地図上の座標左上(Y1)
prefData[3][i]：地図上の座標右下(X2)
prefData[4][i]：地図上の座標右下(Y2)
prefData[5][i]：地方名

地方名の所は必要に応じて無くすことも可能ですし、他のものに変更することも可能です。 各都道府県の座標は長方形の領域で座標を設定します。県の形を確実に再現はでいませんが、実用に耐えうるレベルと考えられます。また、設定する領域が重なり合った場合、配列変数（[i]）の大きい方が優先されます。

フォーム

FORM要素で構成し、テキストボックス２つを用意します。それぞれName属性で「Fmap」「pref」「code」と名前を付けます。これらの名前の変更は可能ですが、スクリプト中の「document.Fmap.pref.value」の部分も同時に変更する必要があります。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

[Go To Top]

ソース(スクリプト＆フォーム)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>マップサーチ</title>

<style type="text/css">
<!--
.map{
	position:		absolute;
	left:			0px;
	top:			120px;
}
-->
</style>

<script language="JavaScript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var maxPref = 47;						//最大県数
var prefData = new Array();
	prefData[0]  = new Array();		//県名
	prefData[1]  = new Array();		//X1
	prefData[2]  = new Array();		//Y1
	prefData[3]  = new Array();		//X2
	prefData[4]  = new Array();		//Y2
	prefData[5]  = new Array();		//CODE
var dx = 0;
var dy = 0;

function Init(){
	if(iIE4){
		document.onmousemove = Mmove;
	}
	if(iNN4){
		window.captureEvents(Event.MOUSEMOVE);
		window.onmousemove = Mmove;
	}
	iniData();
}

function Mmove(e){
	if(iIE4){
		dx = parseInt(event.offsetX);
		dy = parseInt(event.offsetY);
	}
	if(iNN4){
		dx = parseInt(e.layerX);
		dy = parseInt(e.layerY);
	}
	return false;
}

function frmOut(){
	var i;
	var n = maxPref;
	for(i = 0; i < maxPref; i++){
		if((dx >= prefData[1][i])&&(dx < prefData[3][i])){
			if((dy >= prefData[2][i])&&(dy < prefData[4][i])){
				n = i;
			}
		}
	}
	if(n < maxPref){
		document.Fmap.pref.value = prefData[0][n];
		document.Fmap.code.value = prefData[5][n];
	}else{
		document.Fmap.pref.value = "";
		document.Fmap.code.value = "";
	}
}

function iniData(){
	prefData[0][0] = "北海道";
	prefData[1][0] = 410;
	prefData[2][0] = 30;
	prefData[3][0] = 535;
	prefData[4][0] = 130;
	prefData[5][0] = "北海道地方";

	prefData[0][1] = "青森県";
	prefData[1][1] = 375;
	prefData[2][1] = 140;
	prefData[3][1] = 422;
	prefData[4][1] = 170;
	prefData[5][1] = "東北地方";

	prefData[0][2] = "秋田県";
	prefData[1][2] = 369;
	prefData[2][2] = 140;
	prefData[3][2] = 391;
	prefData[4][2] = 211;
	prefData[5][2] = "東北地方";

	prefData[0][3] = "岩手県";
	prefData[1][3] = 395;
	prefData[2][3] = 182;
	prefData[3][3] = 422;
	prefData[4][3] = 226;
	prefData[5][3] = "東北地方";

	prefData[0][4] = "山形県";
	prefData[1][4] = 350;
	prefData[2][4] = 211;
	prefData[3][4] = 370;
	prefData[4][4] = 246;
	prefData[5][4] = "東北地方";

	prefData[0][5] = "宮城県";
	prefData[1][5] = 374;
	prefData[2][5] = 228;
	prefData[3][5] = 397;
	prefData[4][5] = 254;
	prefData[5][5] = "東北地方";

	prefData[0][6] = "福島県";
	prefData[1][6] = 340;
	prefData[2][6] = 254;
	prefData[3][6] = 378;
	prefData[4][6] = 281;
	prefData[5][6] = "東北地方";

	prefData[0][7] = "新潟県";
	prefData[1][7] = 300;
	prefData[2][7] = 242;
	prefData[3][7] = 336;
	prefData[4][7] = 268;
	prefData[5][7] = "中部・北陸地方";

	prefData[0][8] = "長野県";
	prefData[1][8] = 273;
	prefData[2][8] = 273;
	prefData[3][8] = 300;
	prefData[4][8] = 305;
	prefData[5][8] = "中部・北陸地方";

	prefData[0][9] = "山梨県";
	prefData[1][9] = 285;
	prefData[2][9] = 306;
	prefData[3][9] = 304;
	prefData[4][9] = 321;
	prefData[5][9] = "中部・北陸地方";

	prefData[0][10] = "富山県"
	prefData[1][10] = 258;
	prefData[2][10] = 260;
	prefData[3][10] = 278;
	prefData[4][10] = 276;
	prefData[5][10] = "中部・北陸地方";

	prefData[0][11] = "石川県";
	prefData[1][11] = 243;
	prefData[2][11] = 245;
	prefData[3][11] = 255;
	prefData[4][11] = 276;
	prefData[5][11] = "中部・北陸地方";

	prefData[0][12] = "福井県";
	prefData[1][12] = 220;
	prefData[2][12] = 274;
	prefData[3][12] = 244;
	prefData[4][12] = 289;
	prefData[5][12] = "中部・北陸地方";

	prefData[0][13] = "茨城県";
	prefData[1][13] = 333;
	prefData[2][13] = 300;
	prefData[3][13] = 357;
	prefData[4][13] = 320;
	prefData[5][13] = "関東地方";

	prefData[0][14] = "栃木県";
	prefData[1][14] = 326;
	prefData[2][14] = 278;
	prefData[3][14] = 346;
	prefData[4][14] = 301;
	prefData[5][14] = "関東地方";

	prefData[0][15] = "群馬県";
	prefData[1][15] = 300;
	prefData[2][15] = 278;
	prefData[3][15] = 323;
	prefData[4][15] = 300;
	prefData[5][15] = "関東地方";

	prefData[0][16] = "埼玉県";
	prefData[1][16] = 303;
	prefData[2][16] = 301;
	prefData[3][16] = 327;
	prefData[4][16] = 315;
	prefData[5][16] = "関東地方";

	prefData[0][17] = "東京都";
	prefData[1][17] = 306;
	prefData[2][17] = 313;
	prefData[3][17] = 325;
	prefData[4][17] = 322;
	prefData[5][17] = "関東地方";

	prefData[0][18] = "神奈川県";
	prefData[1][18] = 300;
	prefData[2][18] = 321;
	prefData[3][18] = 321;
	prefData[4][18] = 331;
	prefData[5][18] = "関東地方";

	prefData[0][19] = "千葉県";
	prefData[1][19] = 329;
	prefData[2][19] = 319;
	prefData[3][19] = 351;
	prefData[4][19] = 343;
	prefData[5][19] = "関東地方";

	prefData[0][20] = "静岡県";
	prefData[1][20] = 262;
	prefData[2][20] = 323;
	prefData[3][20] = 300;
	prefData[4][20] = 343;
	prefData[5][20] = "東海地方";

	prefData[0][21] = "愛知県";
	prefData[1][21] = 236;
	prefData[2][21] = 311;
	prefData[3][21] = 261;
	prefData[4][21] = 332;
	prefData[5][21] = "東海地方";

	prefData[0][22] = "岐阜県";
	prefData[1][22] = 232;
	prefData[2][22] = 289;
	prefData[3][22] = 263;
	prefData[4][22] = 311;
	prefData[5][22] = "東海地方";

	prefData[0][23] = "三重県";
	prefData[1][23] = 213;
	prefData[2][23] = 318;
	prefData[3][23] = 233;
	prefData[4][23] = 341;
	prefData[5][23] = "東海地方";

	prefData[0][24] = "滋賀県";
	prefData[1][24] = 213;
	prefData[2][24] = 297;
	prefData[3][24] = 228;
	prefData[4][24] = 316;
	prefData[5][24] = "関西地方";

	prefData[0][25] = "奈良県";
	prefData[1][25] = 200;
	prefData[2][25] = 321;
	prefData[3][25] = 211;
	prefData[4][25] = 340;
	prefData[5][25] = "関西地方";

	prefData[0][26] = "和歌山県";
	prefData[1][26] = 178;
	prefData[2][26] = 328;
	prefData[3][26] = 196;
	prefData[4][26] = 357;
	prefData[5][26] = "関西地方";

	prefData[0][27] = "京都府";
	prefData[1][27] = 195;
	prefData[2][27] = 287;
	prefData[3][27] = 211;
	prefData[4][27] = 308;
	prefData[5][27] = "関西地方";

	prefData[0][28] = "大阪府";
	prefData[1][28] = 193;
	prefData[2][28] = 300;
	prefData[3][28] = 202;
	prefData[4][28] = 325;
	prefData[5][28] = "関西地方";

	prefData[0][29] = "兵庫県";
	prefData[1][29] = 176;
	prefData[2][29] = 276;
	prefData[3][29] = 194;
	prefData[4][29] = 311;
	prefData[5][29] = "関西地方";

	prefData[0][30] = "鳥取県"
	prefData[1][30] = 148;
	prefData[2][30] = 269;
	prefData[3][30] = 175;
	prefData[4][30] = 283;
	prefData[5][30] = "中国地方";

	prefData[0][31] = "岡山県";
	prefData[1][31] = 142;
	prefData[2][31] = 287;
	prefData[3][31] = 167;
	prefData[4][31] = 304;
	prefData[5][31] = "中国地方";

	prefData[0][32] = "島根県";
	prefData[1][32] = 97;
	prefData[2][32] = 266;
	prefData[3][32] = 140;
	prefData[4][32] = 280;
	prefData[5][32] = "中国地方";

	prefData[0][33] = "広島県";
	prefData[1][33] = 104;
	prefData[2][33] = 283;
	prefData[3][33] = 140;
	prefData[4][33] = 301;
	prefData[5][33] = "中国地方";

	prefData[0][34] = "山口県";
	prefData[1][34] = 66;
	prefData[2][34] = 280;
	prefData[3][34] = 99;
	prefData[4][34] = 301;
	prefData[5][34] = "中国地方";

	prefData[0][35] = "香川県";
	prefData[1][35] = 142;
	prefData[2][35] = 309;
	prefData[3][35] = 164;
	prefData[4][35] = 320;
	prefData[5][35] = "四国地方";

	prefData[0][36] = "徳島県";
	prefData[1][36] = 147;
	prefData[2][36] = 320;
	prefData[3][36] = 168;
	prefData[4][36] = 337;
	prefData[5][36] = "四国地方";

	prefData[0][37] = "愛媛県";
	prefData[1][37] = 98;
	prefData[2][37] = 313;
	prefData[3][37] = 122;
	prefData[4][37] = 326;
	prefData[5][37] = "四国地方";

	prefData[0][38] = "高知県";
	prefData[1][38] = 108;
	prefData[2][38] = 328;
	prefData[3][38] = 147;
	prefData[4][38] = 344;
	prefData[5][38] = "四国地方";

	prefData[0][39] = "福岡県";
	prefData[1][39] = 45;
	prefData[2][39] = 293;
	prefData[3][39] = 67;
	prefData[4][39] = 309;
	prefData[5][39] = "九州地方";

	prefData[0][40] = "佐賀県";

	prefData[1][40] = 28;
	prefData[2][40] = 297;
	prefData[3][40] = 42;
	prefData[4][40] = 313;
	prefData[5][40] = "九州地方";

	prefData[0][41] = "長崎県";
	prefData[1][41] = 16;
	prefData[2][41] = 297;
	prefData[3][41] = 29;
	prefData[4][41] = 323;
	prefData[5][41] = "九州地方";

	prefData[0][42] = "大分県";
	prefData[1][42] = 63;
	prefData[2][42] = 309;
	prefData[3][42] = 82;
	prefData[4][42] = 336;
	prefData[5][42] = "九州地方";

	prefData[0][43] = "熊本県";
	prefData[1][43] = 36;
	prefData[2][43] = 319;
	prefData[3][43] = 53;
	prefData[4][43] = 347;
	prefData[5][43] = "九州地方";

	prefData[0][44] = "宮崎県";
	prefData[1][44] = 48;
	prefData[2][44] = 337;
	prefData[3][44] = 70;
	prefData[4][44] = 367;
	prefData[5][44] = "九州地方";

	prefData[0][45] = "鹿児島県";
	prefData[1][45] = 13;
	prefData[2][45] = 346;
	prefData[3][45] = 38;
	prefData[4][45] = 379;
	prefData[5][45] = "九州地方";

	prefData[0][46] = "沖縄県";
	prefData[1][46] = 458;
	prefData[2][46] = 310;
	prefData[3][46] = 486;
	prefData[4][46] = 340;
	prefData[5][46] = "沖縄地方";
}

// -->
</script>

</head>

<body onload="Init()">

地図をクリックすると都道府県名が出力されます。
<form name="Fmap">
	都道府県：<input type="text" name="pref" size="20"><br>
	地方　　：<input type="text" name="code" size="20">
</form>

<div id="iL1" class="map">
	<a href="JavaScript:void(0)" onclick="frmOut()">
		<img src="image/japanmap.gif" alt="日本地図" border="0" width="560" height="390">
	</a>
</div>

</body>
</html>

[Go To Top]