GoogleマップMarkerCluster API：画面の外でクラスターを取得するにはどうすればよいですか？

Question

GoogleマップとMarkerCluster APIを使用するウェブページがあります。 マップ上のすべてのクラスターを特定のズームレベルで取得できる必要があります。たとえば、このコードを取る：

//Where the center of the screen will be 
var center = new google.maps.LatLng(37.4419, -122.1419); 
var options = { 
    'zoom': 13, 
    'center': center, 
    //Google map type 
    'mapTypeId': google.maps.MapTypeId.ROADMAP 
}; 

//Create the google map 
var map = new google.maps.Map(document.getElementById("map"), options); 
//Create the marker clusters, where markers is an array of lat and longs 
var mc = new MarkerClusterer(map, markers); 
//Print all of the clusters at zoom level 13 
console.log(mc.getTotalClusters()); 

私は方法が必要になり、その後、上記のコードは、唯一の7をプリントアウトするだろう、ズームレベル13で10個のクラスターがある場合に問題があるが、唯一の7が私の画面の境界の内側にありますすべてクラスタにアクセスすることができます（画面に表示されていなくても）。 MarkerClustererがどのように動作するかの

簡単な例：実際​​

https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

https://googlemaps.github.io/js-marker-clusterer/docs/examples.html

https://developers.google.com/maps/articles/toomanymarkers

Answer 1

、getTotalClusters F：ここ https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html

がMarkerClusterのAPIにはいくつかの参照ですunctionは、現在のビューポート内で表示可能なマーカーの数だけのクラスターを返します。クラスタの総量はマーカーは、クラスタを作成します関数をオーバーライドすることにより、現在のビューポート内に配置されているかどうかのチェックを無効にするでしょう得るために

一つのオプション：

MarkerClusterer.prototype.createClusters_ = function() { 
    if (!this.ready_) { 
    return; 
    } 

    for (var i = 0, marker; marker = this.markers_[i]; i++) { 
    //if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {  
    if (!marker.isAdded) {  
     this.addToClosestCluster_(marker); 
    } 
    } 
}; 

実施例

MarkerClusterer.prototype.createClusters_ = function() { 
 
    if (!this.ready_) { 
 
    return; 
 
    } 
 

 
    for (var i = 0, marker; marker = this.markers_[i]; i++) { 
 
    //if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {  
 
    if (!marker.isAdded) {  
 
     this.addToClosestCluster_(marker); 
 
    } 
 
    } 
 
}; 
 

 

 
function initMap(data) { 
 
    var center = new google.maps.LatLng(59.339025,18.065818); 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 5, 
 
     center: center, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    
 
    var markers = []; 
 
    for (var i = 0; i < data.photos.length; i++) { 
 
     var dataPhoto = data.photos[i]; 
 
     var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude); 
 
     var marker = new google.maps.Marker({ 
 
      position: latLng 
 
     }); 
 
     markers.push(marker); 
 
    } 
 
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' }); 
 

 
    google.maps.event.addListenerOnce(map, 'idle', function(){ 
 
     console.log("Total number of clusters: " + markerCluster.getTotalClusters()); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', 
 
function(){ 
 
    $.getJSON("https://gist.githubusercontent.com/vgrem/fb601469049c4be809ad4ea4bbcdc381/raw/data.json") 
 
    .success(function(data) { 
 
     initMap(data); 
 
    });  
 
});

body { 
 
     margin: 0; 
 
     padding: 10px 20px 20px; 
 
     font-family: Arial; 
 
     font-size: 16px; 
 
     } 
 
     #map-container { 
 
     padding: 6px; 
 
     border-width: 1px; 
 
     border-style: solid; 
 
     border-color: #ccC#ccC#999 #ccc; 
 
     -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; 
 
     -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; 
 
     box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; 
 
     width: 600px; 
 
     } 
 
     #map { 
 
     width: 600px; 
 
     height: 400px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script> 
 
<div id="map-container"><div id="map"></div></div>

Plunker