次の例では、初期表示で任意の２地点間の自動車ルートを探索して地図に表示します。
マーカはドラッグして移動させることができ、移動後の地点でルートを再探索します。
自動車のルートを探索するには、ZDC.SearchのgetRouteByDrive()を利用します。
ルートを地図内に表示するには、ZDC.MapクラスのgetAdjustZoom()メソッドを利用します。
マーカをドラッグして移動させるには、ZDC.addListener()を利用します。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <script src="//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> <script type="text/javascript"> var map, mrkStart, mrkEnd, dragging, draggingMrk, difLat, difLon, oldStartLat, oldStartLon, oldEndLat, oldEndLon, plWidgets = [], imgdir = '../../image/search/'; var guide_type = { 'start': { custom: { base: { src: imgdir + 'route_bg.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(0, 0) }, content: { src: imgdir + 'route_cat.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(0, 0) } }, offset: ZDC.Pixel(-5, -35) }, 'end': { custom: { base: { src: imgdir + 'route_bg.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(38, 0) }, content: { src: imgdir + 'route_cat.png', imgSize: new ZDC.WH(35, 35), imgTL: new ZDC.TL(35, 0) } }, offset: ZDC.Pixel(-5, -35) } }; var line_property = { '高速道路': { strokeColor: '#3000ff', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '都市高速道路': { strokeColor: '#008E00', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '国道': { strokeColor: '#007777', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '主要地方道': { strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '都道府県道': { strokeColor: '#008800', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '一般道路(幹線)': { strokeColor: '#000088', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '一般道路(その他)': { strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '導入路': { strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, '細街道(主要)': { strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' }, 'フェリー航路': { }, '道路外': { strokeColor: '#880000', strokeWeight: 5, lineOpacity: 0.5, lineStyle: 'solid' } }; function loadMap() { var startLat = 35.7188213, startLon = 140.2055166, endLat = 35.7825368, endLon = 139.2924499; map = new ZDC.Map( document.getElementById('ZMap') ); /* 地図上の緯度経度を取得(getPointerPosition)できるようにする */ map.pointerPositionOn(); /* マーカーを追加 */ mrkStart = new ZDC.Marker( new ZDC.LatLon(startLat, startLon), guide_type['start'] ); mrkEnd = new ZDC.Marker( new ZDC.LatLon(endLat, endLon), guide_type['end'] ); map.addWidget(mrkStart); map.addWidget(mrkEnd); /* 吹き出しを追加 */ var msg_info = new ZDC.MsgInfo(startLat, {offset: ZDC.Pixel(12, -30)}); map.addWidget(msg_info); /* マーカークリック時のイベントを登録 */ ZDC.bind( mrkStart, ZDC.MARKER_CLICK, {name: 'スタート', marker: mrkStart, info: msg_info}, showInfo ); ZDC.bind( mrkEnd, ZDC.MARKER_CLICK, {name: 'ゴール', marker: mrkEnd, info: msg_info}, showInfo ); /* マーカーをドラッグ可能にする */ ZDC.addListener(map, ZDC.MAP_MOUSEMOVE, onMouseMove); ZDC.addListener(map, ZDC.MAP_MOUSEUP, onMouseUp); ZDC.addDomListener(document, 'mouseup', onMouseUp); ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEMOVE, onMouseMove); ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEDOWN, onMouseDown); ZDC.addListener(mrkStart, ZDC.MARKER_MOUSEUP, onMouseUp); ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEMOVE, onMouseMove); ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEDOWN, onMouseDown); ZDC.addListener(mrkEnd, ZDC.MARKER_MOUSEUP, onMouseUp); /* 自動車ルート探索を実行 */ searchRoute(); } /* 吹き出しを表示 */ function showInfo() { this.info.moveLatLon(this.marker.getLatLon()); this.info.setHtml( '<div style="font-size:80%; line-height: 1.3;"><b>' + this.name + '</b><br>' + '緯度' + this.marker.getLatLon().lat + '<br>' + '経度' + this.marker.getLatLon().lon + '</div>' ); this.info.open(); } /* 自動車ルート探索を実行 */ function searchRoute() { /* マーカー位置の変化がない場合は自動車ルート探索を行わない */ if (oldStartLat == mrkStart.getLatLon().lat && oldStartLon == mrkStart.getLatLon().lon && oldEndLat == mrkEnd.getLatLon().lat && oldEndLon == mrkEnd.getLatLon().lon) { return; } ZDC.Search.getRouteByDrive({ from: mrkStart.getLatLon(), to: mrkEnd.getLatLon() },function(status, res) { if (status.code == '000') { /* 取得成功 */ writeRoute(res); oldStartLat = mrkStart.getLatLon().lat; oldStartLon = mrkStart.getLatLon().lon; oldEndLat = mrkEnd.getLatLon().lat; oldEndLon = mrkEnd.getLatLon().lon; } else { /* 取得失敗 */ alert(status.text); } }); } /* 自動車ルートを描画 */ function writeRoute(res) { var link = res.route.link, latlons = []; /* 前回描画した領域を消去 */ refreshPolygon(); for (var i = 0, j = link.length; i < j; i++) { var opt = line_property[link[i].roadType]; var pllatlons = []; for (var k = 0; k < link[i].line.length; k++) { pllatlons.push(link[i].line[k]); if (k == 0) { latlons[i] = link[i].line[k]; } if (i == j - 1 && k == (link[i].line.length - 1)) { latlons[i + 1] = link[i].line[k]; } } var pl = new ZDC.Polyline(pllatlons, opt); map.addWidget(pl); plWidgets.push(pl); } /* 地点が全て表示できる縮尺レベルを取得 */ var adjust = map.getAdjustZoom(latlons); map.moveLatLon(adjust.latlon); map.setZoom(adjust.zoom); /* 地図を表示 */ var divZmap = document.getElementById('ZMap'); if (divZmap.style.display == 'none') { divZmap.style.display = 'block'; } } /* 描画した領域をすべて削除 */ function refreshPolygon() { while (plWidgets.length > 0) { map.removeWidget(plWidgets.shift()); } } /* マウスダウンイベント処理 */ function onMouseDown() { /* 移動対象のMarkerを保持 */ draggingMrk = this; /* マウスダウン位置の緯度経度とマーカーの緯度経度の差分を保持 */ var cLatLon = map.getPointerPosition(); difLat = cLatLon.lat - draggingMrk.getLatLon().lat; difLon = cLatLon.lon - draggingMrk.getLatLon().lon; dragging = true; } /* マウスムーブイベント処理 */ function onMouseMove() { /* ドラッグ中のみ処理させる */ if (dragging) { var latlon = map.getPointerPosition(); /* マーカー表示緯度経度を取得 */ var mkLat = latlon.lat - difLat; var mkLon = latlon.lon - difLon; draggingMrk.moveLatLon(new ZDC.LatLon(mkLat, mkLon)); } } /* マウスアップイベント処理 */ function onMouseUp() { if (dragging) { dragging = false; searchRoute(); } } </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute; display:none;"></div> </html>