次の例では、外部APIで取得するデータを道のり順に表示させます。
外部APIで取得するデータを道のり順に表示させるには、ZDC.MoyoriクラスのsearchRouteByUserItem()を利用します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&enc=SJIS&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 } ); /* スケールバーを表示 */ map.addWidget( new ZDC.ScaleBar()); /* 通常のコントロールを表示 */ 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 } }, /* コールバック関数を設定 */ 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.point.lat, this.poi.point.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.point = { 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: 750px; height: 500px; position: absolute; top: 0px; left: 20px;"></div> </body> </html>