API 2.0からAPI 3.0の検索メソッドの変更点

API 3.0ではZDC.Search.getByZmaps()とWebAPIを利用して検索を行います。
API 2.0マニュアルの都庁周辺のコンビニを検索するを元に解説します。別タブで差分を表示する

API 2.0の検索メソッドとAPI 3.0のWebAPIの対応関係は関連資料のAPI(2_3系)機能比較表をご確認ください。

実行結果

ソースコードと解説

API 2.0のZDC.Search.getPoiByLatLon()をAPI 3.0のWebAPI「緯度経度でのPOI検索（poi/latlon）」に変更します。

１．API 2.0のloaderからAPI 3.0のloaderに変更します。
"http://api.its-mo.com/cgi/loader.cgi?key=xxx&ver=2.0&api=zdcmap.js,search.js&enc=EUC&force=1"
　　　↓
"https://api.its-mo.com/v3/loader?key=xxx&api=zdcmap.js,control.js,search.js&enc=UTF8"

２．ZDC.Search.getPoiByLatLon(query, func)からZDC.Search.getByZmaps(apiname, params, func)に変更します。
第一引数apinameに対象とするWebAPIをString型で指定します。「緯度経度でのPOI検索」のAPI名である'poi/latlon'を指定します。
第二引数paramsに検索パラメータを指定します。latlonの値はnew ZDC.LatLon(lat, lon)からString型で'lat,lon'で指定します。

ZDC.Search.getPoiByLatLon({
    latlon: new ZDC.LatLon(35.6863166, 139.695047),
    genrecode: '0014000180',
    limit: '0,10'
},・・・

↓

ZDC.Search.getByZmaps('poi/latlon', {
    latlon: '35.6863166,139.695047',
    genrecode: '0014000180',
    limit: '0,10'
},・・・

latlonの修正以外は基本的にAPI 2.0の検索パラメータのままで実行可能ですが、変更点もありますのでWebAPIマニュアルのリクエストパラメータをよくご確認ください。自動車ルート検索(route3/drive)は変更点が多いので解説ページを参照してください。

３．出力値の変更
ZDC.Search.getByZmaps()の戻り値の第一引数にはステータスオブジェクト、第二引数にはWebAPIの実行結果オブジェクトが入ります。
検索リクエストの成功を表すステータスオブジェクトの値は200に変更されています。

if (status.code === 000)　→　if (status.code === 200)

実行結果オブジェクトの緯度経度情報のプロパティがlatlonからpointに変更されています。

poi.latlon.lat　→　poi.point.lat
poi.latlon.lon　→　poi.point.lon

ソースコードを参考に緯度経度情報を利用する個所を修正してください。

API 2.0からAPI 3.0の検索メソッドの変更点は以上です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,search.js&enc=UTF8" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
    var map, msg,
        lat = 35.6778614, lon = 139.7703167, arrmrk = [];

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

        msg = new ZDC.MsgInfo(latlon, {offset: ZDC.Pixel(0, -18)});
        map.addWidget(msg);

        map.addWidget(new ZDC.ScaleBar());
        map.addWidget(new ZDC.Control());
    }

    function exec(){
        /* 緯度経度で周辺のPOI探索を実行 */
        /* ジャンルコード（コンビニ：0014000180） */
        ZDC.Search.getByZmaps('poi/latlon', {
            latlon: '35.6863166,139.695047',
            genrecode: '0014000180',
            limit: '0,10'
        },function(status, res) {
            if (status.code === 200) {
                /* 取得成功 */
                markerDisp(res);
            } else {
                /* 取得失敗 */
                alert(status.text);
            }
        });
    }

    function markerDisp(res) {
    	if (res.item.length === 0) {
    		alert('検索結果が0件です。');
    	}
        /* マーカを作成 */
        var items = res.item;
        var latlons = [];
        for (var i=0, j=items.length; i<j; i++) {

            var itemlatlon = new ZDC.LatLon(items[i].poi.point.lat, items[i].poi.point.lon);

            latlons.push(itemlatlon);

            var mrk = new ZDC.Marker(itemlatlon);
            map.addWidget(mrk);
            arrmrk.push(mrk);

            /* マーカをクリックしたときの動作 */
            ZDC.bind(mrk, ZDC.MARKER_CLICK, items[i].poi, markerClick); 

        }

        /* 地点が全て表示できる縮尺レベルを取得 */
        var adjust = map.getAdjustZoom(latlons);
        map.moveLatLon(adjust.latlon);
        map.setZoom(adjust.zoom);
    }

    function markerClick() {
        var labelhtml;
        labelhtml = '<div><font size = "-1"><div><b>' + this.text + '</b></div>';
        labelhtml += '<table><tr><td>\u3012' + this.zipcode + ' ' + this.addressText + '</td></tr>';
        labelhtml += '<tr><td>電話番号：' + this.phoneNumber + '</td></tr></table></font></div>';

        msg.setHtml(labelhtml);
        msg.moveLatLon(new ZDC.LatLon(this.point.lat, this.point.lon));
        msg.open();
    }

    function markerDelete(){
        /* マーカを削除 */
        while(arrmrk.length > 0){
            map.removeWidget(arrmrk.shift());
        }
        /* 吹き出しを閉じる */
        msg.close();
    }

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:600px; height:500px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:0px; left:650px; position:absolute;">
        <input type="button" value="検索実行" onclick="exec();"><br>
        <input type="button" value="結果削除" onclick="markerDelete();">
    </div>
</body>
</html>