複数のマーカをクラスタとしてまとめる

実行結果

クラスタをクリックすると、そのクラスタに属するマーカが全て表示されます。
縮尺レベルを変更するとクラスタを再計算し地図上に表示します。

ソースコードと解説

複数のマーカをクラスタとして表示するにはZDC.MarkerClusterクラスを利用します。

<!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,userwidget.js&enc=UTF8" type="text/javascript"></script>

<!-- 取得したmarkercluster.jsを別途インクルードする -->
<script type="text/javascript" src="markercluster-1.1.js"></script>
<script type="text/javascript">

    function loadMap() {
        var map = new ZDC.Map(
            document.getElementById('ZMap'),
               {
                   zoom: 3,
                   mapType: ZDC.MAPTYPE_HIGHRES_LV18
               }
        );

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

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

        var points = [35.6993834,139.8420817,35.5937677,139.8022117,35.7451715,139.9249235,
                35.6228699,139.9333972,35.6188277,139.9505359,35.6426869,139.5442987,
                35.7152940,139.8396549,35.6731445,139.9797448,35.6092503,139.7884051,
                35.6945432,139.9922836,35.7164108,139.5491312,35.7470273,139.9701101,
                35.6792393,139.5693625,35.5935533,139.9676310,35.7201691,139.6554320
            ];
        var markers = makeMarkers(points);

        /* マーカクラスタを作成する */
        new ZDC.MarkerCluster(map, {markers: markers});
    };

    function makeMarkers(points) {
        var markers = [];
        for (var i = 0, j = points.length-1; i < j - 1; i+=2) {
            markers.push(new ZDC.Marker(new ZDC.LatLon(points[i], points[i + 1])));
        }
        return markers;
    };

</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>