ホ−ム » 基本サンプル » 特定のエリア内のPOIを表示する

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

実行結果

次の例ではラジオボタンをクリックすると地図の中心から1km以内かつ選択した区のコンビニが表示されます。

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

ソースコードと解説

特定のエリア内のコンビニを検索するには、ZDC.Search.getAddrPolygon()を利用します。

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

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,search.js,shape.js,geo.js&enc=SJIS&force=1"></script>
<script type="text/javascript">
//<![CDATA[

var map,
    widgets = [],
    message,
    pois = [];

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

function loadMap() {

    var latlon = new ZDC.LatLon(35.6778614, 139.7703167);
    map = new ZDC.Map(document.getElementById('ZMap'), {
        latlon : latlon,
        zoom : 7
    });

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

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

function getPois(latlon) {

    /* 半径1km内のコンビニを検索 */
    ZDC.Search.getPoiByLatLon({
        latlon : latlon,
        radius : 1000,
        genrecode : '0014000180',
        limit : '0,100'
    }, function(status, itemresult) {
        if (status.code != '000') {
            /* 取得失敗 */
            alert('POIの取得に失敗しました\n' + 
                   status.text + status.code);
            return;
        }
        for (var i = 0; i < itemresult.item.length; i++) {
            pois.push(itemresult.item[i]);
        }
    });
}

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

    var geom,
        polygons,
        addrcd = checkAreaCode();

    setSelectableRadio(false);

    /* 地図上のウィジットをすべて削除 */
    refreshWidget();

    /* 住所コードからポリゴンを取得 */
    ZDC.Search.getAddrPolygon({
        addrcd : addrcd,
        meshlvl : 6,
        addrlvl : 2,
        limit : '1,200'
    }, function(status, result) {
        if (status.code != '000') {
            /* 取得失敗 */
            alert('指定した住所のポリゴンの取得に失敗しました\n' + 
                   status.text + status.code);
            return;
        }
        /* geomからポリゴンを取り出す */
        geom = result.item[0].geom;
        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++){
            /* POIの緯度経度が領域内入っているか判定する */
            if(ZDC.isPolygonContainLatLon(pois[i].poi.latlon, polygons[j])) {
                makeMarker(pois[i]);
                break;
            }
        }
    }
}

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

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

    widgets.push(widget);

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

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

    var marker,
        latlon = poi.poi.latlon;

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

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

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

    var msgHtml = '<b>' + this.poi.poi.text + '</b><br>' + '  ' + 
                  this.poi.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 (widgets.length > 0) {
        map.removeWidget(widgets.shift());
    }
}

//]]>

</script>
</head>
<body onload="loadMap();">
    <div id="ZMap"
        style="border:1px solid #777777; width:500px; height:300px; top:0px; 
        left:20px; position:absolute;"></div>
    <div id="SelectArea" style="top:0px; left:540px; 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>