クリックした地点の市区町村を塗る

実行結果

次の例ではクリックした地点の市区町村が塗られます。
ソースコードと解説

市区町村を塗るには、WebAPIのaddress_polygonを利用します。
当サンプルでは緯度経度での住所検索を行った後、取得した住所コードを使用して住所ポリゴン検索を行っています。
どちらもZDC.Searchで使用可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,search.js,shape.js,geo.js&enc=UTF8" type="text/javascript"></script>
<script type="text/javascript">

    var map,widgets = [];

    function loadMap() {
        map = new ZDC.Map(document.getElementById('ZMap'), {
            latlon : new ZDC.LatLon(35.6778614, 139.7703167),
            zoom : 4,
            mapType: ZDC.MAPTYPE_HIGHRES_LV18
        });

        /* スケールバーを作成 */
        map.addWidget(new ZDC.ScaleBar());

        /* 通常のコントロールを表示 */
        map.addWidget(new ZDC.Control());

        /* 地図をクリックしたときの動作 */
        ZDC.addListener(map, ZDC.MAP_CLICK, getClickLatLon);
    };

    /* クリックした場所の市区町村範囲を描画する */
    function getClickLatLon() {
        var addrcd;
        var geom;
        var latlon = map.getClickLatLon();

        /* 前回描画した領域を消去 */
        refreshPolygon();

        /* 住所コードを取得 */
        ZDC.Search.getByZmaps('location',{
            latlon : latlon.lat + "," + latlon.lon
        }, function(status, addrobj) {
            if (status.code == '200') {
                /* 取得成功 */
                addrcd = addrobj[0].address.code;

                /* 住所コードを市区町村(5桁)までに変換 */
                addrcd = addrcd.slice(0, 5);

                /* 住所コードから住所ポリゴンを取得 */
                ZDC.Search.getByZmaps('address_polygon',{
                    addrcode : addrcd,
                }, function(status, result) {
                    if (status.code == '200') {
                        /* ポリゴン取得成功 */
                        geom = result.result.geometry;

                        /* ポリゴンを描画 */
                        drawPolygonByGeom(geom);
                    } else {
                        /* ポリゴン取得失敗 */
                        alert(status.code + 'ポリゴン取得失敗');
                    }
                });
            } else {
                /* 住所コード取得失敗 */
                alert(status.code + '住所コード取得失敗');
            }
        });
    }

    /* geomからポリゴンを取得し描画する */
    function drawPolygonByGeom(geom) {

        var polylatlons = [];
        var tmplatlons = geom.coordinates;

        for (var i = 0; i < tmplatlons.length; i++) {

            if (geom.type == "Polygon") {
                for (var j = 0; j < tmplatlons[i].length; j++) {
                    polylatlons.push(new ZDC.LatLon(tmplatlons[i][j][1],
                                                    tmplatlons[i][j][0]));
                }
                /* 1つ目の要素は一番外のポリゴンを表している */
                if (i == 0) {
                    /* ポリゴン描画*/
                    drawPolygon(polylatlons);
                } else {
                    /* 領域内の穴になっている部分のポリゴン描画*/
                    undrawPolygon(polylatlons);
                }
                polylatlons.length = 0;

            } else if (geom.type == "MultiPolygon") {
                for (var j = 0; j < tmplatlons[i].length; j++) {
                    for (var k = 0; k < tmplatlons[i][j].length; k++) {
                        polylatlons.push(new ZDC.LatLon(tmplatlons[i][j][k][1],
                                                        tmplatlons[i][j][k][0]));
                    }

                    /* 1つ目の要素は一番外のポリゴンを表している */
                    if (j == 0) {
                        /* ポリゴン描画*/
                        drawPolygon(polylatlons);
                    } else {
                        /* 領域内の穴になっている部分のポリゴン描画*/
                        undrawPolygon(polylatlons);
                    }
                    polylatlons.length = 0;
                }
            }
        }
    }

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

        /* ポリゴンを描画するウィジットを作成 */
        var widget = new ZDC.Polyline(polylatlons, {
            strokeWeight : 2,
            fillColor : '#202080',
            fillOpacity : 0.5
        });
        widgets.push(widget);

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

    /* 描画領域内で穴になっている領域を描画 */
    function undrawPolygon(polylatlons) {
        /* ポリゴンを描画するウィジットを作成 */
        var widget = new ZDC.Polyline(polylatlons, {
            strokeWeight : 2,
            fillColor : '#000000',
            fillOpacity : 1.0
        });
        widgets.push(widget);

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

    /* ウィジットをすべて削除 */
    function refreshPolygon() {
        while (widgets.length > 0) {
            map.removeWidget(widgets.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>
</body>
</html>