ホ−ム » 基本サンプル » まとめて周辺検索する

まとめて周辺検索する

実行結果

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

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

ソースコードと解説

まとめて周辺検索オブジェクトを表示するには、ZDC.Moyoriクラスを利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="http://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.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
//<![CDATA[
    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
        );
    }

    /* まとめて周辺検索の実行後に呼びだれるコールバック関数 */
    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();
                });
            });
        });
    }
//]]>
</script>
</head>
<body onLoad="loadMap();">
<div id="ZMap" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>
</body>
</html>