いつもNAVI API マニュアル

実行結果

次の例では地図を２ヶ所以上クリックし、「補正」ボタンを押すと引かれた線を補正します。
ソースコードと解説

点列補正をするには、ZDC.Search.getRoadLinkByLatlons()を利用します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,shape.js,search.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById("ZMap"),
            {
                zoom: 9
            });

        /* 地図をクリックしたときの動作 */
        ZDC.addListener(map, ZDC.MAP_CLICK, getClickLatLon);
    }

    var latLons = [];
    var cnt = 1;

    function getClickLatLon() {
        var pl, mrk;
        if (cnt > 10) return;

        /* クリックした緯度経度を保存 */
        var itemLatLon = map.getClickLatLon();
        latLons.push(itemLatLon);

        /* クリックした地点にマーカを作成 */
        mrk = new ZDC.Marker(map.getClickLatLon(),{
            color: ZDC.MARKER_COLOR_ID_BLUE_S,
            number: ZDC["MARKER_NUMBER_ID_" + cnt + "_S"]
        });

        /* マーカを追加 */
        map.addWidget(mrk);

        /* クリックした地点に線を引く */
        if (cnt > 1) {
            var lineLatLons = [];

            lineLatLons.push(latLons[(cnt-2)]);
            lineLatLons.push(itemLatLon);
            pl = new ZDC.Polyline(lineLatLons,
                {
                    strokeWeight: 2,
                    strokeColor: "#FF0000" 
            });

            /* 線を地図に追加 */
            map.addWidget(pl);
        }
        cnt++;
    }

    function routeSearch() {
        if (latLons.length < 2) {
            alert("2ヶ所以上の地点を指定してください。");
            return false;
        } 

        /* 点列から移動経路を推定 */
        ZDC.Search.getRoadLinkByLatlons({
            latlons: latLons
            }, function(status, res) {
                if (status.code == "000") {
                    /* 取得成功 */
                    routeDisp(status, res);
                } else {
                    /* 取得失敗 */
                    alert(status.text);
                }
        });
    }

    /* 点列補正 */
    function routeDisp(status, res) {
        var item = res.item;
        for (var i = 0, k = item.length; i < k; i++) {
            var plRoute, ll = [];
            for (var j = 0, l = item[i].roadLink.latlons.length; j < l; j++) {
                ll.push(item[i].roadLink.latlons[j]);
            }
            /* 移動経路の線を引く */
            plRoute = new ZDC.Polyline(ll,
                {
                    strokeWeight: 3,
                    strokeColor: "#800080"
                });

            /* 線を地図に追加 */
            map.addWidget(plRoute);
        }
    }

//]]>
</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div style="top:280px; left:540px; position:absolute;">
     <input type="button" value="補正" onclick="routeSearch();"/><br>
</body>
</html>