特定のエリア内のPOIを表示する

実行結果

次の例ではラジオボタンをクリックすると地図の中心から1km以内かつ選択した区のホテルが表示されます。
ソースコードと解説

特定のエリア内のコンビニを検索するには、ZDC.Search.getByZmaps()と、
WebAPIのaddress_polygon、poi/latlonを利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,search.js,geo.js,shape.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

var map,
    lat = 35.6778614, lon = 139.7703167,
    markers = [], ov, pl, message,
    polygons,
    pois = [];

var area = [
            {name: '中央区',   code: "13102"},
            {name: '千代田区', code: "13101"},
           ];

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

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

    /* 吹き出しの作成 吹き出しをここで作成しておきこれを使いまわす */
    message = new ZDC.MsgInfo(clatlon, {
        offset : ZDC.Pixel(0, -18)
    });
    map.addWidget(message);

    /* 半径1kmの円を作成 */
    ov = new ZDC.Oval({
        latlon: clatlon,
        x: 1000,
        y: 1000,
    }, {
        // strokeColor: '#00FF00',
        strokeWeight: 2,
        fillColor: '#FF0000',
        lineOpacity: 0.4,
        fillOpacity: 0.4,
        circle: true
    });
    map.addWidget(ov);
    ZDC.addListener(map, ZDC.MAP_DRAG_END, moveOval)

    /* 地図の中心から半径1km以内のコンビニ情報を取得 */
    getPois();
    ZDC.addListener(map, ZDC.MAP_DRAG_END, getPois)
};

function getPois() {

    pois = [];
    var latlon = map.getLatLon();
    /* 半径1km内のコンビニを検索 */
    ZDC.Search.getByZmaps('poi/latlon', {
            latlon : latlon.lat + ',' + latlon.lon,
            radius : 1000,
            genrecode : '0013000110',
            limit : '0,1000'
    }, function(status, res) {
        if (status.code === 200 && res.status.code === '0000') {
            /* 取得成功 */
            for (var i = 0; i < res.item.length; i++) {
                pois.push(res.item[i].poi);
            }
            if (polygons) {
                /* 地図上のマーカーをすべて削除 */
                refreshWidget();
                /* マーカの作成 */
                setMarkers(polygons);
            }
        } else {
            /* 取得失敗 */
            alert('POIの取得に失敗しました\n' +
                   status.text + status.code);
        }
    });
}

/* 地図中心点が移動したときの円の動作 */
function moveOval() {
    var latlon = map.getLatLon();
    map.removeWidget(ov);
    ov.moveLatLon(latlon);
    map.addWidget(ov);
}

/* ラジオボタンがクリックされた時の動作 */
function viewConveni(){

    var geom,
        addrcd = checkAreaCode();

    setSelectableRadio(false);

    /* 地図上のマーカーをすべて削除 */
    refreshWidget();
    if (pl) map.removeWidget(pl);

    /* 住所コードからポリゴンを取得 */
    ZDC.Search.getByZmaps('address_polygon', {
        addrcode : addrcd,
        meshlvl : 6,
        addrlvl : 2,
        limit : '1,200'
    }, function(status, res) {
        if (status.code != '200') {
            /* 取得失敗 */
            alert('指定した住所のポリゴンの取得に失敗しました\n' +
                   status.text + status.code);
            return;
        }

        /* geomからポリゴンを取り出す */
        geom = res.result.geometry;
        polygons = getPolygonsByGeom(geom);

        /* マーカの作成 */
        setMarkers(polygons);

        /* ポリゴン描画 */
        for(var i = 0; i < polygons.length; i++){
            drawPolygon(polygons[i]);
        }

        setSelectableRadio(true);
    });
}

/* geomからポリゴンを取り出す */
function getPolygonsByGeom(geom) {
    var polylatlons = [];
    var tmplatlons = geom.coordinates;

    /* typeがPolygonの場合 */
    if (geom.type == "Polygon") {
        polylatlons[0] = [];
        for (var i = 0; i < tmplatlons[0].length; i++) {
            polylatlons[0].push(new ZDC.LatLon(tmplatlons[0][i][1],
                                               tmplatlons[0][i][0]));
        }
        return polylatlons;
    }

    /* typeがMultiPolygonの場合 */
    if (geom.type == "MultiPolygon") {
        for (var i = 0; i < tmplatlons.length; i++) {
            polylatlons[i] = [];
            for (var j = 0; j < tmplatlons[i][0].length; j++) {
                polylatlons[i].push(new ZDC.LatLon(tmplatlons[i][0][j][1],
                                                   tmplatlons[i][0][j][0]));
            }
        }
        return polylatlons;
    }
    return [];
}

/* POIが領域内に入っているかどうかをチェックしマーカを作る */
function setMarkers(polygons) {

    for(var i = 0; i < pois.length; i++){
        for(var j = 0; j < polygons.length; j++){
            var point = pois[i].point;
            var latlon = new ZDC.LatLon(point.lat, point.lon);
            /* POIの緯度経度が領域内入っているか判定する */
            if(ZDC.isPolygonContainLatLon(latlon, polygons[j])) {
                makeMarker(pois[i],latlon);
                break;
            }
        }
    }
}

/* ポリゴン描画 */
function drawPolygon(polylatlon) {

    /* ポリゴンを描画するウィジットを作成 */
    pl = new ZDC.Polyline(polylatlon, {
        strokeWeight : 1,
        fillColor : '#202080',
        fillOpacity : 0.3,
        closePath : true
    });

    /* MAPにウィジットを追加 */
    map.addWidget(pl);
}

/* マーカを作成 */
function makeMarker(poi,latlon) {

    var marker;

    marker = new ZDC.Marker(latlon);
    map.addWidget(marker);
    markers.push(marker);

    /* マーカをクリックしたら吹き出しを表示させるようにする */
    ZDC.bind(marker, ZDC.MARKER_CLICK, {
        poi : poi,
        latlon : latlon
    }, showMessage);
}

/* 吹き出しを表示 */
function showMessage() {

    var msgHtml = '<b>' + this.poi.text + '</b><br>' + '  ' +
                  this.poi.addressText + '<br>';
    message.moveLatLon(this.latlon);
    message.setHtml(msgHtml);
    message.open();
}

/* ラジオボタンにチェックを入れた区の住所コードを調べる */
function checkAreaCode() {

    var areaname;
    var inputelem = document.getElementById('SelectArea')
                            .getElementsByTagName('input');

    for (var i = 0; i < inputelem.length; i++) {
        if (inputelem[i].checked) {
            areaname = inputelem[i].value;
            break;
        }
    }
    for (var i = 0; i < area.length; i++) {
        if (area[i].name == areaname) {
            return area[i].code;
        }
    }
    return "00000";
}

/* ラジオボタンを有効/無効化*/
function setSelectableRadio(selectable){
    var inputelem = document.getElementById('SelectArea')
                            .getElementsByTagName('input');
    for (var i = 0; i < inputelem.length; i++) {
        inputelem[i].disabled = !selectable;
    }
}

/* ウィジットをすべて削除 */
function refreshWidget() {
    message.close();
    while (markers.length > 0) {
        map.removeWidget(markers.shift());
    }
}

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap"
        style="border:1px solid #777777; width:750px; height:500px; top:0px;
        left:20px; position:absolute;"></div>
    <div id="SelectArea" style="top:510px; left:20px; position:absolute;">
        <label><input type="radio" name="area" value="中央区"
                onClick="viewConveni();"/>
            中央区
        </label>
        <br>
            <label><input type="radio" name="area" value="千代田区"
                onClick="viewConveni();"/>
            千代田区
        </label>
        <br>
    </div>
</body>
</html>