ホ−ム » 基本サンプル » 歩行者ルート検索の結果を地図に表示する

歩行者ルート検索の結果を地図に表示する

実行結果

次の例では、ボタンを押した際に歩行者ルート検索の結果を線とマーカを使って地図に表示します。
マーカをクリックした際に、通過する道路種別の情報を記載した吹き出しを表示します。

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

ソースコードと解説

歩行者のルート検索をするには、ZDC.Search.getByZmaps()route/walkを利用します。
ルートを地図内に表示するには、ZDC.MapクラスのgetAdjustZoom()メソッドを利用します。

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<script src="//api.its-mo.com/v3/loader?key=JSZ9ea6d26ac8a7|VbFeP&api=zdcmap.js,control.js,search.js,shape.js&enc=UTF8&force=1" type="text/javascript"></script>
<style type="text/css">
<!--
.personalboxtt{ font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: left; width:700px; height:20px; }
.personalboxt { font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: right; width:120px; height:20px; }
.dev{}
.dev .personalboxtt { color: #000000; background-color: #80CC00; }
.dev .personalboxt  { color: #003399; background-color: #B3D973; }
.personalboxf{ font-size: 12px; font-family: "MS Pゴシック", Verdana, Helvetica; text-align: left; width:580px; height:20px; color: #003399; background-color: #F8F8F8; }
.header2 {position: relative; }
-->
</style>
<script type="text/javascript">

    var map, msg_info, imgdir ='../../image/search/',
    from = new ZDC.LatLon(35.685754722, 139.785605556), to = new ZDC.LatLon(35.669612, 139.75245);

    var guyde_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(0, -36)
        },
        '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(0, -36)
        }
    };

    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(35.6778614, 139.7703167);
        map = new ZDC.Map(document.getElementById('ZMap'),{
            latlon: ll,
            zoom: 10,
            mapType: ZDC.MAPTYPE_HIGHRES_LV18
        });


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

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

    function exec(){

        ZDC.Search.getByZmaps('route/walk', {
            from: from.lat + ',' + from.lon,
            to: to.lat + ',' + to.lon
        }, function(status, res) {
            if (status.code === 200 && res.status.code === '0000') {
                /* 取得成功 */
                writeRoute(status, res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    };


    function writeRoute(status, res) {

        /* スタートとゴールのアイコンを地図に重畳します */
        var start = new ZDC.Marker(from, guyde_type['start']);
        var end   = new ZDC.Marker(to, guyde_type['end']);
        /*
           スタートとゴールのウィジットが他のマーカの
           下にならないようにz-indexを設定します
        */
        start.setZindex(110);
        end.setZindex(110);

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

        var link = res.route.link;

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

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

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

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

            if (link[i].type != '通常通路') {
                var guide = link[i].type;

                var mk = new ZDC.Marker(new ZDC.LatLon(latlon[0], 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 html = '<div style = "width:200px; height:50px;">';
            html += '<table border="1" style="width:180px;">';
            html += '<tr>';
            html += '<td width="35%" style="font-size:10pt;">通路種別</td>';
            html += '<td style="font-size:10pt;">' + this.link.structureType + '</td>';
            html += '</tr>';
            html += '<tr>';
            html += '<td style="font-size:10pt;">構造種別</td>';
            html += '<td style="font-size:10pt;">'+ this.link.type +'</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:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:20px; left:630px; position:absolute;">
        <input type="button" value="歩行者ルート検索" onclick="exec();">
    </div>
</body>
</html>