API 2.0からAPI 3.0の自動車ルート検索(route3/drive)の変更点

API 2.0のZDC.Search.getRouteByDrive()をAPI 3.0のWebAPI「自動車経路検索（route3/drive）」に変更する方法を説明します。
API 2.0マニュアルの自動車ルート検索の結果を地図に表示するを元に解説します。別タブで差分を表示する

実行結果

次の例では、ボタンを押した際に自動車ルート検索の結果を線とマーカを使って地図に表示します。
マーカをクリックした際に、通過する交差点の情報を記載した吹き出しを表示します。

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

ソースコードと解説

ZDC.Search.getRouteByDrive()と自動車経路検索（route3/drive）とでは変更点が多いので両マニュアルの入出力値をよくご確認ください。
(例. 必須パラメータsearchTypeの追加。料金指定がcartypeからtolltypeに変更等。)　自動車ルート検索入出力値比較表[xlsx]を確認する。

１．API 2.0のloaderからAPI 3.0のloaderに変更します。
"http://api.its-mo.com/cgi/loader.cgi?key=xxx&ver=2.0&api=zdcmap.js,search.js,shape.js&enc=EUC&force=1"
　　　↓
"https://api.its-mo.com/v3/loader?key=xxx&api=zdcmap.js,control.js,search.js,shape.js&enc=UTF8

２．ZDC.Search.getRouteByDrive(query, func)からZDC.Search.getByZmaps(apiname, params, func)に変更します。
第一引数apinameに'route3/drive'を指定します。
第二引数paramsに検索パラメータを指定します。from,toの値はnew ZDC.LatLon(lat, lon)からString型で'lat,lon'で指定します。
新規に必須パラメータのsearchTypeを追加します。searchTypeに指定する値はroute3/driveのマニュアルをご確認ください。

/* スタート地点の緯度経度 */
from = new ZDC.LatLon(35.6806275, 139.8015336);
/* ゴール地点の緯度経度 */
to   = new ZDC.LatLon(35.6659792, 139.74036);

ZDC.Search.getRouteByDrive({
    from: from,
    to: to
},・・・


↓

/* スタート地点の緯度経度 */
from = new ZDC.LatLon(35.6806275, 139.8015336);
/* ゴール地点の緯度経度 */
to   = new ZDC.LatLon(35.6659792, 139.74036);

/* 自動車ルート探索を実行 */
ZDC.Search.getByZmaps('route3/drive',{
    from: from.lat + ',' + from.lon,  //'35.6806275,139.8015336'
    to: to.lat + ',' + to.lon,        //'35.6659792,139.74036'
    searchType: 0
},・・・


３．出力値の変更
ZDC.Search.getByZmaps()の戻り値の第一引数にはステータスオブジェクト、第二引数にはWebAPIの実行結果オブジェクトが入ります。
検索リクエストの成功を表すステータスオブジェクトの値は200に変更されています。

if (status.code === 000)　→　if (status.code === 200)


検索リクエストに成功してもルートが見つからないケースもあるのでfunction writeRoute(res)内でルートの値を確認します。

function writeRoute(res) {
    if (res.route === null) {
        alert('ルートが見つかりません');
    }
    ...



リンク情報オブジェクトの緯度経度情報のプロパティは次のように変更されています。

"line": [{"lat": 35.680625,"lon": 139.8015333},{"lat": 35.6806472,"lon": 139.8018139}]
　　↓
"line": {"latlon": [35.680625,139.8015333,35.6806472,139.8018139]}

ソースコードを参考に緯度経度情報を利用している個所を修正してください。


誘導画像情報のプロパティは次のように変更されています。

guidance.***ImageUri　→　guidance.imageurl[0].url

ソースコードを参考に誘導画像情報を利用している個所を修正してください。


交差点名称、道路名称のプロパティはそれぞれ下記のように変更されています。
guidance.crossName　→　guidance.pointName
guidance.roadName　→　guidance.routeName


API 2.0からAPI 3.0の自動車ルート検索の変更点は以上です。

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

    var map, from, to, msg_info,
        lat = 35.6778614, lon = 139.7703167, 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, -30)
        },
        '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, -30)
        }
    };

    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 ll  = new ZDC.LatLon(lat, lon);
        map = new ZDC.Map(document.getElementById('ZMap'),{
            latlon: ll,
            zoom: 5
        });

        msg_info = new ZDC.MsgInfo(ll, {offset: ZDC.Pixel(0, -18)});
        map.addWidget(msg_info);

        map.addWidget(new ZDC.ScaleBar());
        map.addWidget(new ZDC.Control());
    };

    function exec(){
        /* スタート地点の緯度経度 */
        from = new ZDC.LatLon(35.6806275, 139.8015336);
        /* ゴール地点の緯度経度 */
        to   = new ZDC.LatLon(35.6659792, 139.74036);

        /* 自動車ルート探索を実行 */
        ZDC.Search.getByZmaps('route3/drive',{
            from: from.lat + ',' + from.lon,
            to: to.lat + ',' + to.lon,
            searchType: 0
        },function(status, res) {
            if (status.code == '200') {
                /* 取得成功 */
                writeRoute(res);
            } else {
                /* 取得失敗 */
            	alert(status.text);
            }
    	});
    };

    function writeRoute(res) {
        if (res.route === null) {
            alert('ルートが見つかりません');
        }

        /* スタートとゴールのアイコンを地図に重畳します */
        var start = new ZDC.Marker(from,guide_type['start']);
        var end   = new ZDC.Marker(to,guide_type['end']);

        /*
          スタートとゴールのウィジットが他のマーカの
          下にならないようにz-indexを設定します
        */
        start.setZindex(110);
        end.setZindex(110);

        map.addWidget(start);
        map.addWidget(end);

        var link = res.route.link;

        var latlons = [];

        for (var i=0, j=link.length; i<j; i++) {

            var opt = line_property[link[i].roadType];
            var pllatlons =[];

            for (var k=0, l=link[i].line.latlon.length; k<l; k+=2) {
                pllatlons.push(new ZDC.LatLon(link[i].line.latlon[k],link[i].line.latlon[k+1]));

                /* getAdjustZoom用に全地点の緯度経度を取得 */
                latlons.push(new ZDC.LatLon(link[i].line.latlon[k],link[i].line.latlon[k+1]));

            }
            var pl = new ZDC.Polyline(pllatlons, opt);
            map.addWidget(pl);

            if (link[i].guidance != null) {
                /* 誘導画像情報があればマーカーを作成 */
                if (link[i].guidance.imageurl.length != 0) {
                    var mk = new ZDC.Marker(new ZDC.LatLon(link[i].line.latlon[0],link[i].line.latlon[1]));
                    map.addWidget(mk);

                    /* マーカをクリックしたときの動作 */
                    ZDC.bind(mk, ZDC.MARKER_CLICK, {link: link[i]}, markerClick);
                }
            }
        }
        /* 地点が全て表示できる縮尺レベルを取得 */
        var adjust = map.getAdjustZoom(latlons);
        map.moveLatLon(adjust.latlon);
        map.setZoom(adjust.zoom);
    };

    function markerClick() {

        var url = this.link.guidance.imageurl[0].url;

        var road_name  = this.link.guidance.routeName || 'なし';
        var cross_name = this.link.guidance.pointName || 'なし';

        var html = '<div style = "width:200px; height:170px; overflow-y:scroll;">';
            html += '<img src="' + url + '" width="100%"></src>';
            html += '<table border="1" style="width:180px;">';
            html += '<tr>';
            html += '<td width="35%" style="font-size:10pt;">道路名</td>';
            html += '<td style="font-size:10pt;">'+ road_name +'</td>';
            html += '</tr>';
            html += '<tr>';
            html += '<td style="font-size:10pt;">交差点名</td>';
            html += '<td style="font-size:10pt;">'+ cross_name +'</td>';
            html += '</tr></table></div>';

        msg_info.setHtml(html);
        msg_info.moveLatLon(new ZDC.LatLon(this.link.line.latlon[0], this.link.line.latlon[1]));
        msg_info.open();
    };

</script>
</head>
<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:600px; height:500px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:650px; position:absolute;">
        <input type="button" value="自動車ルート検索" onclick="exec();">
    </div>
</body>
</html>

Copyright(C) 2024 ZENRIN DataCom CO.,LTD. All Rights Reserved.