ホ−ム » 基本サンプル » 地域図を利用する

地域図を利用する

実行結果

次の例では、地域図を表示します。
地域図をクリックすると、クリックした市区町村の代表点緯度経度を中心点にします。

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

ソースコードと解説

地域図を表示するには、ZDC.AreaMapクラスを利用します。

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<script src="//api.its-mo.com/v3/loader?key=JSZ9ea6d26ac8a7|VbFeP&api=zdcmap.js,control.js,areamap.js&enc=UTF8&force=1" type="text/javascript"></script>
<script type="text/javascript">

    var map, smap, areadom,
        lat = 35.6778614, lon = 139.7703167;

    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());

        /* 地域図を表示 */
        smap = new ZDC.AreaMap(
        {
            todCode: '01a',
            callback: showSearchMap,
            areaMap: document.getElementById('area')
        });
    };

    /* 「地域図表示」ボタン押下時に動作 */
    function addAreaMap() {
        /* 再作成のために、地域図があれば消す */
        if (smap) {
            smap.remove();
            smap = null;
        }
        /* 地域図を表示 */
        smap = new ZDC.AreaMap(
        {
            todCode: document.getElementById('todCode').value.toString(),
            callback: showSearchMap,
            areaMap: document.getElementById('area')
        });
    };

    /* 地域図クリック時に動作 */
    var showSearchMap = function(rtn) {
        /* 再作成のために、地域図があれば消す */
        if (smap) {
            smap.remove();
            smap = null;
        }
        /* 地域図をクリックした位置を取得して地図を移動 */
        map.moveLatLon(rtn.latlon);
    };

</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="area" style="top:560px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:520px; left:30px; position:absolute;">
        <select name="todCode" id="todCode" >
            <option value='01a'>北海道西部</option>
            <option value='01b'>北海道東部</option>
            <option value='02'>青森県</option>
            <option value='03'>岩手県</option>
            <option value='04'>宮城県</option>
            <option value='05'>秋田県</option>
            <option value='06'>山形県</option>
            <option value='07'>福島県</option>
            <option value='08'>茨城県</option>
            <option value='09'>栃木県</option>
            <option value='10'>群馬県</option>
            <option value='11'>埼玉県</option>
            <option value='12'>千葉県</option>
            <option value='13'>東京都</option>
            <option value='14'>神奈川県</option>
            <option value='15'>新潟県</option>
            <option value='16'>富山県</option>
            <option value='17'>石川県</option>
            <option value='18'>福井県</option>
            <option value='19'>山梨県</option>
            <option value='20'>長野県</option>
            <option value='21'>岐阜県</option>
            <option value='22'>静岡県</option>
            <option value='23'>愛知県</option>
            <option value='24'>三重県</option>
            <option value='25'>滋賀県</option>
            <option value='26'>京都府</option>
            <option value='27'>大阪府</option>
            <option value='28'>兵庫県</option>
            <option value='29'>奈良県</option>
            <option value='30'>和歌山県</option>
            <option value='31'>鳥取県</option>
            <option value='32'>島根県</option>
            <option value='33'>岡山県</option>
            <option value='34'>広島県</option>
            <option value='35'>山口県</option>
            <option value='36'>徳島県</option>
            <option value='37'>香川県</option>
            <option value='38'>愛媛県</option>
            <option value='39'>高知県</option>
            <option value='40'>福岡県</option>
            <option value='41'>佐賀県</option>
            <option value='42'>長崎県</option>
            <option value='43'>熊本県</option>
            <option value='44'>大分県</option>
            <option value='45'>宮崎県</option>
            <option value='46'>鹿児島県</option>
            <option value='47'>沖縄県</option>
        </select>
        <input type="button" value="地域図表示" onclick="addAreaMap();">
    </div>
</body>
</html>