道沿いのコンビニを検索する

実行結果

次の例では自動車ルートの左側20m以内にあるコンビニを検索し表示します。
ソースコードと解説

自動車ルートからコンビニを検索するには、ZDC.Search.getByZmaps()のpoi/polylineを利用します。
<!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,search.js,shape.js&alert=1" type="text/javascript"></script>
<script type="text/javascript">

var map,
    message;

function loadMap() {

    var startlatlon = new ZDC.LatLon(35.688528056, 139.738494444);
    var endlatlon = new ZDC.LatLon(35.6926525, 139.798583333);

    var routelatlons = [];

    map = new ZDC.Map(document.getElementById('ZMap'), {
        zoom : 8,
        mapType: ZDC.MAPTYPE_HIGHRES_LV18
    });


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

    /* 吹き出しの作成 吹き出しをここで作成しておきこれを使いまわす */
    message = new ZDC.MsgInfo(map.getLatLon(), {
        offset : ZDC.Pixel(0, -18)
    });
    map.addWidget(message);

    /* 自動車ルート検索 */
    ZDC.Search.getByZmaps('route3/drive', {
            searchType:0,
            from: startlatlon.lat + ',' + startlatlon.lon,
            to: endlatlon.lat + ',' + endlatlon.lon
    },　function(status, res) {console.log(res);
        if (status.code === 200 && res.status.code === '0000') {
            /* 取得成功 */
            writeRoute(res.route.link);

        } else {
            /* 取得失敗 */
            alert('ルートの取得に失敗しました\n' + status.code + status.text);
        }
    });
}

/* 自動車ルートの描画とPOIの表示 */
function writeRoute(routelinks) {

    var routelatlons = [];

    for (var i = 0; i < routelinks.length; i++) {
        var latlons = routelinks[i].line.latlon;
        for (var k=0, l=latlons.length-1; k<l; k+=2) {
            routelatlons.push(new ZDC.LatLon(latlons[k],latlons[k+1]));
        }
    }
    /* 経路の描画 */
    var widget = new ZDC.Polyline(routelatlons, {
        strokeColor : '#3000ff',
        strokeWeight : 5,
        lineOpacity : 0.5
    });
    /* 地図にウィジットを追加 */
    map.addWidget(widget);

    /* 経路の左側にあるPOIを表示 */
    makeLeftPoiByRoute(routelatlons);
}

/* 検索した経路の左にあるPOIだけを表示 */
function makeLeftPoiByRoute(routelatlons) {

    var templatlons = [];

    for (var i = 0, l = routelatlons.length; i < l; i++) {
        templatlons.push(routelatlons[i].lat);
        templatlons.push(routelatlons[i].lon);
    }
    /* 経路でコンビニを探索 */
    ZDC.Search.getByZmaps('poi/polyline', {
        line : templatlons.join(),
        word : 'ローソン,セブンイレブン,ファミリーマート,サークルＫ,サンクス',
        srchtype : 'or'
    },　function(status, res) {
        if (status.code === 200 && res.status.code === '0000') {
            /* 取得成功 */
            makeMessageMarker(res);
        } else {
            /* 取得失敗 */
            alert('POIの取得に失敗しました\n' + status.code + status.text);
        }
    });
}


/* マーカとメッセージを作成 */
function makeMessageMarker(res) {

    for (var i = 0; i < res.item.length; i++) {
        if (res.item[i].side == "left") {
            var latlon = res.item[i].poi.point;

            /* マーカを作成 */
            var marker = new ZDC.Marker(latlon);
            map.addWidget(marker);

            /* マーカをクリックしたら吹き出しを表示させるようにする */
            ZDC.bind(marker, ZDC.MARKER_CLICK, {
                poi : res.item[i],
                latlon : latlon
            }, showMessage);
        }
    }
}

/* 吹き出しを表示 */
function showMessage() {

    var msgHtml = '<b>' + this.poi.poi.text + '</b><br>' + '  ' + 
                  this.poi.poi.addressText + '<br>';

    message.moveLatLon(this.latlon);
    message.setHtml(msgHtml);
    message.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>
</body>
</html>