1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	1	<!DOCTYPE HTML>
2	<html>	2	<html lang="ja">
3	<head>	3	<head>
4		4	<meta charset="UTF-8">
5	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">	5	<script src="https://api.its-mo.com/v3/loader?key=JSZddc5111626c8\|Zo4wz&api=zdcmap.js,control.js,search.js,shape.js&enc=UTF8&force=1" type="text/javascript"></script>
6	<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js,shape.js&enc=EUC&force=1" type="text/javascript"></script>
7	<script type="text/javascript">	6	<script type="text/javascript">
8	//<![CDATA[	7
9	var map, from, to, msg_info,	8	var map, from, to, msg_info,
10	lat = 35.6778614, lon = 139.7703167, imgdir ='../../image/search/';	9	lat = 35.6778614, lon = 139.7703167, imgdir ='../../image/search/';
11	var guide_type = {	10	var guide_type = {
12	'start': {	11	'start': {
13	custom: {	12	custom: {
14	base: {	13	base: {
15	src: imgdir + 'route_bg.png',	14	src: imgdir + 'route_bg.png',
16	imgSize: new ZDC.WH(35, 35),	15	imgSize: new ZDC.WH(35, 35),
17	imgTL: new ZDC.TL(0, 0)	16	imgTL: new ZDC.TL(0, 0)
18	},	17	},
19	content: {	18	content: {
20	src: imgdir + 'route_cat.png',	19	src: imgdir + 'route_cat.png',
21	imgSize: new ZDC.WH(35, 35),	20	imgSize: new ZDC.WH(35, 35),
22	imgTL: new ZDC.TL(0, 0)	21	imgTL: new ZDC.TL(0, 0)
23	}	22	}
24	},	23	},
25	offset: ZDC.Pixel(-5, -30)	24	offset: ZDC.Pixel(-5, -30)
26	},	25	},
27	'end': {	26	'end': {
28	custom: {	27	custom: {
29	base: {	28	base: {
30	src: imgdir + 'route_bg.png',	29	src: imgdir + 'route_bg.png',
31	imgSize: new ZDC.WH(35, 35),	30	imgSize: new ZDC.WH(35, 35),
32	imgTL: new ZDC.TL(38, 0)	31	imgTL: new ZDC.TL(38, 0)
33	},	32	},
34	content: {	33	content: {
35	src: imgdir + 'route_cat.png',	34	src: imgdir + 'route_cat.png',
36	imgSize: new ZDC.WH(35, 35),	35	imgSize: new ZDC.WH(35, 35),
37	imgTL: new ZDC.TL(35, 0)	36	imgTL: new ZDC.TL(35, 0)
38	}	37	}
39	},	38	},
40	offset: ZDC.Pixel(-5, -30)	39	offset: ZDC.Pixel(-5, -30)
41	}	40	}
42	};	41	};
43		42
44	var line_property = {	43	var line_property = {
45	'高速道路': {strokeColor: '#3000ff', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	44	'高速道路': {strokeColor: '#3000ff', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
46	'都市高速道路': {strokeColor: '#008E00', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	45	'都市高速道路': {strokeColor: '#008E00', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
47	'国道': {strokeColor: '#007777', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	46	'国道': {strokeColor: '#007777', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
48	'主要地方道': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	47	'主要地方道': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
49	'都道府県道': {strokeColor: '#008800', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	48	'都道府県道': {strokeColor: '#008800', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
50	'一般道路(幹線)': {strokeColor: '#000088', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	49	'一般道路(幹線)': {strokeColor: '#000088', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
51	'一般道路(その他)': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	50	'一般道路(その他)': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
52	'導入路': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	51	'導入路': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
53	'細街路(主要)': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},	52	'細街路(主要)': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'},
54	'フェリー航路': {},	53	'フェリー航路': {},
55	'道路外': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}	54	'道路外': {strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid'}
56	};	55	};
57		56
58	function loadMap(){	57	function loadMap(){
59	var ll = new ZDC.LatLon(lat, lon);	58	var ll = new ZDC.LatLon(lat, lon);
60	map = new ZDC.Map(document.getElementById('ZMap'),{	59	map = new ZDC.Map(document.getElementById('ZMap'),{
61	latlon: ll,	60	latlon: ll,
62	zoom: 5	61	zoom: 5
63	});	62	});
64		63
65	msg_info = new ZDC.MsgInfo(ll, {offset: ZDC.Pixel(0, -18)});	64	msg_info = new ZDC.MsgInfo(ll, {offset: ZDC.Pixel(0, -18)});
66	map.addWidget(msg_info);	65	map.addWidget(msg_info);
		66
		67	map.addWidget(new ZDC.ScaleBar());
		68	map.addWidget(new ZDC.Control());
67	};	69	};
68		70
69	function exec(){	71	function exec(){
70	/* スタート地点の緯度経度 */	72	/* スタート地点の緯度経度 */
71	from = new ZDC.LatLon(35.6806275, 139.8015336);	73	from = new ZDC.LatLon(35.6806275, 139.8015336);
72	/* ゴール地点の緯度経度 */	74	/* ゴール地点の緯度経度 */
73	to = new ZDC.LatLon(35.6659792, 139.74036);	75	to = new ZDC.LatLon(35.6659792, 139.74036);
74		76
75	/* 自動車ルート探索を実行 */	77	/* 自動車ルート探索を実行 */
76	ZDC.Search.getRouteByDrive({	78	ZDC.Search.getByZmaps('route3/drive',{
77	from: from,	79	from: from.lat + ',' + from.lon,
78	to: to	80	to: to.lat + ',' + to.lon,
		81	searchType: 0
79	},function(status, res) {	82	},function(status, res) {
80	if (status.code == '000') {	83	if (status.code == '200') {
81	/* 取得成功 */	84	/* 取得成功 */
82	writeRoute(res);	85	writeRoute(res);
83	} else {	86	} else {
84	/* 取得失敗 */	87	/* 取得失敗 */
85	alert(status.text);	88	alert(status.text);
86	}	89	}
87	});	90	});
88	};	91	};
89		92
90	function writeRoute(res) {	93	function writeRoute(res) {
		94	if (res.route === null) {
		95	alert('ルートが見つかりません');
		96	}
91		97
92	/* スタートとゴールのアイコンを地図に重畳します */	98	/* スタートとゴールのアイコンを地図に重畳します */
93	var start = new ZDC.Marker(from,guide_type['start']);	99	var start = new ZDC.Marker(from,guide_type['start']);
94	var end = new ZDC.Marker(to,guide_type['end']);	100	var end = new ZDC.Marker(to,guide_type['end']);
95		101
96	/*	102	/*
97	スタートとゴールのウィジットが他のマーカの	103	スタートとゴールのウィジットが他のマーカの
98	下にならないようにz-indexを設定します	104	下にならないようにz-indexを設定します
99	*/	105	*/
100	start.setZindex(110);	106	start.setZindex(110);
101	end.setZindex(110);	107	end.setZindex(110);
102		108
103	map.addWidget(start);	109	map.addWidget(start);
104	map.addWidget(end);	110	map.addWidget(end);
105		111
106	var link = res.route.link;	112	var link = res.route.link;
107		113
108	var latlons = [];	114	var latlons = [];
109		115
110	for (var i=0, j=link.length; i<j; i++) {	116	for (var i=0, j=link.length; i<j; i++) {
111		117
112	var opt = line_property[link[i].roadType];	118	var opt = line_property[link[i].roadType];
113	var pllatlons =[];	119	var pllatlons =[];
114		120
115	for (var k=0, l=link[i].line.length; k<l; k++) {	121	for (var k=0, l=link[i].line.latlon.length; k<l; k+=2) {
116	pllatlons.push(link[i].line[k]);	122	pllatlons.push(new ZDC.LatLon(link[i].line.latlon[k],link[i].line.latlon[k+1]));
117		123
118	latlons[i] = link[i].line[0];	124	/* getAdjustZoom用に全地点の緯度経度を取得 */
119		125	latlons.push(new ZDC.LatLon(link[i].line.latlon[k],link[i].line.latlon[k+1]));
120	if(i == j-1 && k == 1) {
121	latlons[i+1] = link[i].line[1];
122	}
123		126
124	}	127	}
125	var pl = new ZDC.Polyline(pllatlons, opt);	128	var pl = new ZDC.Polyline(pllatlons, opt);
126	map.addWidget(pl);	129	map.addWidget(pl);
127		130
128	if (link[i].guidance != null) {	131	if (link[i].guidance != null) {
129	var guide = link[i].guidance.guideType;	132	/* 誘導画像情報があればマーカーを作成 */
130		133	if (link[i].guidance.imageurl.length != 0) {
131	/* 交差点 \|\| 方面及び方向 \|\| ETC */	134	var mk = new ZDC.Marker(new ZDC.LatLon(link[i].line.latlon[0],link[i].line.latlon[1]));
132	var url = link[i].guidance.crossImageUri \|\|
133	link[i].guidance.signboardImageUri \|\|
134	link[i].guidance.etcImageUri;
135	if (url) {
136	var mk = new ZDC.Marker(link[i].line[0]);
137	map.addWidget(mk);	135	map.addWidget(mk);
138		136
139	/* マーカをクリックしたときの動作 */	137	/* マーカをクリックしたときの動作 */
140	ZDC.bind(mk, ZDC.MARKER_CLICK, {link: link[i]}, markerClick);	138	ZDC.bind(mk, ZDC.MARKER_CLICK, {link: link[i]}, markerClick);
141	}	139	}
142	}	140	}
143	}	141	}
144	/* 地点が全て表示できる縮尺レベルを取得 */	142	/* 地点が全て表示できる縮尺レベルを取得 */
145	var adjust = map.getAdjustZoom(latlons);	143	var adjust = map.getAdjustZoom(latlons);
146	map.moveLatLon(adjust.latlon);	144	map.moveLatLon(adjust.latlon);
147	map.setZoom(adjust.zoom);	145	map.setZoom(adjust.zoom);
148	};	146	};
149		147
150	function markerClick() {	148	function markerClick() {
151		149
152	var url = this.link.guidance.crossImageUri \|\|	150	var url = this.link.guidance.imageurl[0].url;
153	this.link.guidance.signboardImageUri \|\|
154	this.link.guidance.etcImageUri;
155		151
156	var road_name = this.link.guidance.roadName \|\| 'なし';	152	var road_name = this.link.guidance.routeName \|\| 'なし';
157	var cross_name = this.link.guidance.crossName \|\| 'なし';	153	var cross_name = this.link.guidance.pointName \|\| 'なし';
158		154
159	var html = '<div style = "width:200px; height:150px; overflow-y:scroll;">';	155	var html = '<div style = "width:200px; height:170px; overflow-y:scroll;">';
160	html += '<img src=' + url + '></src>';	156	html += '<img src="' + url + '" width="100%"></src>';
161	html += '<table border="1" style="width:180px;">';	157	html += '<table border="1" style="width:180px;">';
162	html += '<tr>';	158	html += '<tr>';
163	html += '<td width="35%" style="font-size:10pt;">道路名</td>';	159	html += '<td width="35%" style="font-size:10pt;">道路名</td>';
164	html += '<td style="font-size:10pt;">'+ road_name +'</td>';	160	html += '<td style="font-size:10pt;">'+ road_name +'</td>';
165	html += '</tr>';	161	html += '</tr>';
166	html += '<tr>';	162	html += '<tr>';
167	html += '<td style="font-size:10pt;">交差点名</td>';	163	html += '<td style="font-size:10pt;">交差点名</td>';
168	html += '<td style="font-size:10pt;">'+ cross_name +'</td>';	164	html += '<td style="font-size:10pt;">'+ cross_name +'</td>';
169	html += '</tr></table></div>';	165	html += '</tr></table></div>';
170		166
171	msg_info.setHtml(html);	167	msg_info.setHtml(html);
172	msg_info.moveLatLon(new ZDC.LatLon(this.link.line[0].lat, this.link.line[0].lon));	168	msg_info.moveLatLon(new ZDC.LatLon(this.link.line.latlon[0], this.link.line.latlon[1]));
173	msg_info.open();	169	msg_info.open();
174	};	170	};
175		171
176	//]]>
177	</script>	172	</script>
178	</head>	173	</head>
179
180	<body onload="loadMap();">	174	<body onload="loadMap();">
181	<div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"></div>	175	<div id="ZMap" style="border:1px solid #777777; width:600px; height:500px; top:0px; left:20px; position:absolute;"></div>
182	<div id="IBox" style="top:0px; left:540px; position:absolute;">	176	<div id="IBox" style="top:0px; left:650px; position:absolute;">
183	<input type="button" value="自動車ルート検索" onclick="exec();">	177	<input type="button" value="自動車ルート検索" onclick="exec();">
184	</div>	178	</div>
185	</body>	179	</body>