いつもNAVI API マニュアル

実行結果

次の例では、地図上にGeoJSONを描画します。

ソースコードと解説

GeoJSONを描画させるには、ZDC.GeoJSONクラスを利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,shape.js,search.js&enc=EUC&force=1" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="geojson-1.0.js" type="text/javascript"></script>
    <title></title>
</head>
<body onload="load();" style="margin: 0">
<div id="ZMap" style="width: 100%; height: 100%; position: absolute;"></div>
<script>
    var map;

    function load() {
        map = new ZDC.Map(
                document.getElementById('ZMap'), {
                    latlon: new ZDC.LatLon(35.626552, 139.74244),
                    zoom: 10
                }
        );
        // httpのgetリクエストでGeoJSONデータを取得する
        $.get('sample.geojson', function (res) {
            // 文字列の場合は(Geo)JSON形式に変換する
            if (typeof res === 'string') {
                res = JSON.parse(res)
            }
            // GeoJSONオブジェクトの生成
            new ZDC.GeoJSON(map, res, {
                polylineOptions: {
                    fillColor: '#ff0000',
                    fillOpacity: 0.4
                }
            });
        });
    }

</script>
</body>
</html>