点列の補正

実行結果

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

点列補正をするには、ZDC.Search.getRoadLinkByLatlons()を利用します。
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,shape.js,search.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

    var map;

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

        /* スケールバーを作成 */
        map.addWidget(new ZDC.ScaleBar());
        /* 通常のコントロールを表示 */
        map.addWidget(new ZDC.Control());


        /* 地図をクリックしたときの動作 */
        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;
        }
        var templatlons = [];

        for (var i = 0, l = latLons.length; i < l; i++) {
            templatlons.push(latLons[i].lat);
            templatlons.push(latLons[i].lon);
        }
        /* 点列から移動経路を推定 */
        ZDC.Search.getByZmaps('road_path', {
            latlon: templatlons.join(),
        },　function(status, res) {
            if (status.code === 200) {
                /* 取得成功 */
                routeDisp(status, res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    }

    /* 点列補正 */
    function routeDisp(status, res) {
        var item = res.path;
        for (var i = 0, j = item.length; i < j; i++) {
            var ll = [];
            var latlon = item[i].matchLink.line;
            for (var k=0, l=latlon.length-1; k<l; k+=2) {
                ll.push(new ZDC.LatLon(latlon[k],latlon[k+1]));
            }
                    /* 移動経路の線を引く */
            var 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:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
    <div style="top:40px; left:650px; position:absolute;">
     <input type="button" value="補正" onclick="routeSearch();"/><br>
</body>
</html>