SOURCE

G7SMap.init({
    id: 'map',
    key: {
        'bmap': 'ebAmxZxmn8hHBm1anhEcTH8j',
      	'gmap': 'AIzaSyBdZt3pUFIFTWKlHqUA_m6GJo_V--k84KU'
    }
}).then(function (map) {
  	// map即为初始化完成的 G7SMap 地图实例对象
    
  	function getMarkersArr() {
      	var markersArr = [];
      	
      	for (var i = 0; i < 350; i++) {
            var point = new G7SMap.Point((Math.random() * 30 + 94), (Math.random() * 20 + 20));

            markersArr.push(new G7SMap.Marker(point));
        }
      
      	return markersArr;
    }
  	
  	G7SMap.loadPlugins(['markerclusterer'], function () {
        var mc = new G7SMap.plugins.MarkerClusterer(getMarkersArr());
      	var markersArr = getMarkersArr();
      	var marker = new G7SMap.Marker(new G7SMap.Point(116.3738450000, 39.9497120000));
      
        document.querySelector('.add-markers').addEventListener('click', function () {
          	mc.addMarkers(markersArr);
    		});
      
      	document.querySelector('.remove-markers').addEventListener('click', function () {
          	mc.removeMarkers(markersArr);
    		});
      
      	document.querySelector('.add-marker').addEventListener('click', function () {
          	mc.addMarker(marker);
    		});
      
      	document.querySelector('.remove-marker').addEventListener('click', function () {
          	mc.removeMarker(marker);
    		});
      
      	document.querySelector('.clear-markers').addEventListener('click', function () {
          	mc.clearMarkers();
    		});
      
      	document.querySelector('.get-grid-size').addEventListener('click', function () {
          	alert(mc.getGridSize());
    		});
      
      	document.querySelector('.set-grid-size').addEventListener('click', function () {
          	mc.setGridSize(70);
    		});
      
      	document.querySelector('.get-max-zoom').addEventListener('click', function () {
          	alert(mc.getMaxZoom());
    		});
      
      	document.querySelector('.set-max-zoom').addEventListener('click', function () {
          	mc.setMaxZoom(70);
    		});
      
      	document.querySelector('.get-min-size').addEventListener('click', function () {
          	alert(mc.getMinClusterSize());
    		});
      
      	document.querySelector('.set-min-size').addEventListener('click', function () {
          	mc.setMinClusterSize(10);
    		});
      
      	document.querySelector('.get-styles').addEventListener('click', function () {
          	console.info(mc.getStyles());
    		});
      
      	document.querySelector('.get-markers').addEventListener('click', function () {
          	console.info(mc.getMarkers());
    		});
      
      	document.querySelector('.get-clus-count').addEventListener('click', function () {
          	alert(mc.getClustersCount());
    		});
      
      	document.querySelector('.is-aver-center').addEventListener('click', function () {
          	alert(mc.isAverageCenter());
    		});
    });
});

<div id="map" class="map"></div>
<div>
  <button class="add-markers">addMarkers</button>
  <button class="remove-markers">removeMarkers</button>
  <button class="add-marker">addMarker</button>
  <button class="remove-marker">removeMarker</button>
  <button class="clear-markers">移除所有marker</button>
</div>
<div style="margin-top: 10px;">
  <button class="get-grid-size">getGridSize</button>
  <button class="set-grid-size">setGridSize</button>
  <button class="get-max-zoom">getMaxZoom</button>
  <button class="set-max-zoom">setMaxZoom</button>
  <button class="get-min-size">getMinClusterSize</button>
  <button class="set-min-size">setMinClusterSize</button>
</div>
<div style="margin-top: 10px;">
  <button class="get-styles">getStyles</button>
  <button class="get-markers">getMarkers</button>
  <button class="get-clus-count">getClustersCount</button>
  <button class="is-aver-center">isAverageCenter</button>
</div>

.map {
  max-width: 800px;
  height: 500px;
}
.result {
  color: #f60;
}