次の例では、アイコンからの道のりが近い順に、ファミレスおよびスーパを検索します。
アイコンをドラッグできます。
まとめて周辺検索オブジェクトを表示するには、ZDC.Moyoriクラスを利用します。
<!DOCTYPE html> <html> <head> <script src="//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="//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 ); } /* まとめて周辺検索の実行後に呼びだれるコールバック関数 */ 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>