いつもNAVI API マニュアル

実行結果

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

自動車ルートからコンビニを検索するには、ZDC.Search.getPoiByPolyline()を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-JP">
<script src="//test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js,shape.js&enc=SJIS&force=1&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 : 7
    });

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

    /* 自動車のルートを検索 */
    ZDC.Search.getRouteByDrive({
        from : startlatlon,
        to : endlatlon
    }, function(status, routeobj) {
        if (status.code != '000') {
            /* Route取得失敗 */
            alert("ルートの取得に失敗しました\n" + status.code + status.text);
        } else {
            routelatlons = getRouteLatlonsByRouteObject(routeobj);

            /* 経路の描画 */
            drawPolyline(routelatlons);

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

/* 自動車の経路探索結果から緯度経度を取得 */
function getRouteLatlonsByRouteObject(routeobj) {

    var routelinks = routeobj.route;
    var routelatlons = [];

    for (var i = 0; i < routelinks.link.length; i++) {
        for (var j = 0; j < routelinks.link[i].line.length; j++) {
            routelatlons.push(routelinks.link[i].line[j]);
        }
    }
    return routelatlons;
}

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

    var pois = [];
    var partiallatlons = [];
    var templatlons = [];

    for (var i = 0, ll = routelatlons.length; i < ll; i++) {
        templatlons.push(routelatlons[i]);
        if(i%100 == 0 && i != 0){
            partiallatlons.push(templatlons);
            templatlons = [];
        }
    }
    partiallatlons.push(templatlons);

    for (var i = 0, ll = partiallatlons.length; i < ll; i++) {
        /* 経路でコンビニを探索 */
        ZDC.Search.getPoiByPolyline({
            latlons : partiallatlons[i],
            word : "ローソン,セブンイレブン,ファミリーマート,サークルＫ,サンクス",
            srchtype : "or",
            buffer : 20,
            limit : "0,100"
        }, function(status, poiobj) {
            if (status.code != '000') {
                /* POI取得失敗 */
                alert("POIの取得に失敗しました\n" + status.code + status.text);
            } else {
                for (var i = 0; i < poiobj.item.length; i++) {
                    if (poiobj.item[i].side == "left") {
                        pois.push(poiobj.item[i]);
                    }
                }
            }
            /* マーカを作成 */
            makeMessageMarker(pois);
        });
    }
}

/* ポリラインを描画 */
function drawPolyline(polylatlons) {

    /* ポリラインを描画するウィジットを作成 */
    var widget = new ZDC.Polyline(polylatlons, {
        strokeColor : '#3000ff',
        strokeWeight : 5,
        lineOpacity : 0.5
    });
    /* 地図にウィジットを追加 */
    map.addWidget(widget);
}

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

    var marker;

    for (var i = 0; i < pois.length; i++) {
        var latlon = pois[i].poi.latlon;

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

        /* マーカをクリックしたら吹き出しを表示させるようにする */
        ZDC.bind(marker, ZDC.MARKER_CLICK, {
            poi : pois[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:500px; height:300px;
    top:0px; left:20px; position:absolute;"></div>
</body>
</html>