まとめて周辺検索する

実行結果

次の例では、アイコンからの道のりが近い順に、ファミレスおよびスーパを検索します。
アイコンをドラッグできます。
ソースコードと解説

まとめて周辺検索オブジェクトを表示するには、ZDC.Moyoriクラスを利用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&enc=UTF8&api=zdcmap.js,control.js,search.js,shape.js" type="text/javascript"></script>
<!-- 取得したmoyori.jsを別途インクルードする -->
<script type="text/javascript" src="moyori-3.2.js"></script>
<script type="text/javascript" src="//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: 9,
                mapType: ZDC.MAPTYPE_HIGHRES_LV18
            }
        );

        /* スケールバーを作成 */
        scale = new ZDC.ScaleBar();

        /* スケールバーを表示 */
        map.addWidget(scale);

        /* 通常のコントロールを表示 */
        map.addWidget(new ZDC.Control());
        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
                },
                notmultilanguage: 'T'
            },
            /* コールバック関数を設定 */
            callback
        );
    }

    /* まとめて周辺検索の実行後に呼びだれるコールバック関数 */
    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.point.lat, this.poi.point.lon
                    ));
                    this.msg.open();
                });
            });
        });
    }

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