いつもNAVI API マニュアル

実行結果

次の例では、外部APIで取得するデータを道のり順に表示させます。
ソースコードと解説

外部APIで取得するデータを道のり順に表示させるには、ZDC.MoyoriクラスのsearchRouteByUserItem()を利用します。
<!DOCTYPE html>
<html>
<head>

<script src="https://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&enc=SJIS&api=zdcmap.js,search.js,shape.js&force=1" type="text/javascript"></script>
<!-- 取得したmoyori.jsを別途インクルードする -->
<script type="text/javascript" src="moyori_1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">

    var map, moyori,
            lat = 35.6797614, lon = 139.7693167;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: new ZDC.LatLon(lat, lon),
                zoom: 8
            }
        );
        map.addWidget(new ZDC.MapCenter());

        /* まとめて周辺検索オブジェクトを作成する */
        moyori = new ZDC.Moyori(new ZDC.LatLon(lat, lon),
            {
                map: map,
                icon: {offset: ZDC.Pixel(-29, -23),
                        custom: {base: { src: './moyori.png'}}},
                genre: [
                    {
                        /* ジャンルコード(ファミレス) */
                        code: '0024000120',
                        icon: {color: ZDC.MARKER_COLOR_ID_YELLOW_S},
                        lineProperty: {
                            strokeColor: '#ee8100',
                            strokeWeight: 5,
                            lineOpacity: 0.9,
                            lineStyle: 'solid'
                        }
                    },
                    {
                        /* ジャンルコード(スーパー) */
                        code: '0014000170',
                        icon: {color: ZDC.MARKER_COLOR_ID_GREEN_S},
                        lineProperty: {
                            strokeColor: '#007c23',
                            strokeWeight: 5,
                            lineOpacity: 0.9,
                            lineStyle: 'solid'
                        }
                    }
                ],
                radius: 1000,
                ovaloptions: {
                    strokeColor: '#0000FF',
                    strokeWeight: 2,
                    fillColor: '#AFEEEE',
                    lineOpacity: 0.4,
                    fillOpacity: 0.4,
                    circle: true
                }
            },
            /* コールバック関数を設定 */
            callback
        );
        /* 外部のAPIから取得するデータを基にまとめて周辺検索を行う */
        doUserItemFunc(lat, lon);
        /* 中心アイコンの移動毎に外部APIから取得するデータで検索を行う */
        var centerIcon = moyori.getCenterIcon();
        ZDC.addListener(centerIcon, ZDC.MARKER_MOUSEUP, function() {
            var centerLatLon = centerIcon.getLatLon();
            doUserItemFunc(centerLatLon.lat, centerLatLon.lon);
        });
    }

    /* まとめて周辺検索の実行後に呼びだれるコールバック関数 */
    function callback(data) {
        $.each(data, function (key, items) {
            $(items).each(function (i, item) {
                /* アイコンオブジェクトの取得 */
                var icon = moyori.getIconById(item.iconId);
                /* アイコンオブジェクトが押された際に、吹き出しを表示する */
                ZDC.addListener(icon, ZDC.MARKER_MOUSEUP, function(){
                    var node  = '<h4 style="font-size: 1.17em; margin: 0 0 10px 0;">';
                    node += this.poi.text + '</h4><p>';
                    node += this.poi.addressText;
                    this.msg.setHtml(node);
                    this.msg.moveLatLon(new ZDC.LatLon(
                            this.poi.latlon.lat, this.poi.latlon.lon
                    ));
                    this.msg.open();
                });
            });
        });
    }

    /* 外部のAPIを呼び出す */
    function doUserItemFunc(lat, lon) {
        $.ajax({
            type: 'GET',
            cache: false,
            /* ここではサンプルとしてxmlファイルを使用している */
            /* 実際には利用するAPIのURLを指定すること */
            url: 'data/api_sample_data.xml?lat=' + lat + '&lon=' + lon,
            dataType: 'xml',
            success: function(xml) {
                /* 取得データを整形する */
                var items = parseXml(xml);
                /* まとめて周辺検索を行う */
                moyori.searchRouteByUserItem(items, callback);
            }
        });
    }

    /* xmlデータを整形 */
    function parseXml(xml) {
        var item = [];
        $(xml).find('item').each(function(idx, itm) {
            /* poiオブジェクトの作成 */
            var poi = {};
            poi.latlon = {
                lat: $(itm).find('lat').text(),
                lon: $(itm).find('lon').text()
            };
            poi.text = $(itm).find('telName').text();
            poi.addressText = $(itm).find('address').text();
            var obj = {poi: poi};
            item.push(obj);
        });

        var items = [];
        items.push({
            icon: {color: ZDC.MARKER_COLOR_ID_BLUE_L},
            lineProperty: {
                strokeColor: '#0000FF',
                strokeWeight: 5,
                lineOpacity: 0.9,
                lineStyle: 'solid'
            },
            item: item
        });
        return items;
    }

</script>
</head>
<body onLoad="loadMap();">
<div id="ZMap" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>
</body>
</html>