実行結果

ルートをドラッグすることにより任意の通過点を追加できます。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/draggableroute/draggableroute.html

ソースコードと解説

ドラッグできるルートを描画するにはZDC.DraggableRouteクラスを利用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js,search.js,shape.js&enc=EUC&force=1" type="text/javascript"></script>
<!-- 取得したdraggableroute.jsを別途インクルードする -->
<script type="text/javascript" src="draggableroute-1.1.js"></script>
<script type="text/javascript">
//<![CDATA[
    function loadMap() {
        var map = new ZDC.Map(
            document.getElementById('ZMap'), {zoom:5 }
        );
        var query = {};
        var opts = {};

        //ルート探索スタート地点
        query.from = new ZDC.LatLon(35.7187056, 139.9342056); 

        //ルート探索ゴール地点
        query.to = new ZDC.LatLon(35.6162972, 139.5653639);

        //ルート探索のオプション(searchtype)を指定する場合
        query.searchtype = 'dist';

        //ルート線のデザインを指定
        opts.polylineOpt =  {
          strokeColor: '#3000ff', strokeWeight: 8, lineOpacity: 0.8
        };

        //ドラッグできるルートを重畳する
        new ZDC.DraggableRoute(map, query, opts);
    }
//]]>
</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:650px; height:300px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>