Google Maps MarkerCluster API: Wie bekomme ich Cluster außerhalb der Bildschirmansicht?

Question

Ich habe eine Webseite, die Google Maps und die MarkerCluster-API verwendet. Ich muss in der Lage sein, alle Cluster auf der Karte mit einer bestimmten Zoomstufe zu erhalten. Nehmen Sie diesen Code zum Beispiel:

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

Das Problem ist, wenn es 10 Cluster auf Zoomstufe 13, aber nur 7 sind innerhalb meines Bildschirms Grenzen, dann wird der obige Code würde drucken nur aus 7. brauche ich einen Weg Zugriff auf alle Cluster, auch wenn sie nicht auf dem Bildschirm sind.

Einfaches Beispiel dafür, wie die MarkerClusterer funktioniert: https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html

Hier sind einige Hinweise auf die MarkerCluster API:

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

Tat getTotalClusters f Diese Funktion gibt die Anzahl der Cluster nur für Marker zurück, die in einem aktuellen Ansichtsfenster sichtbar sind.

Eine Möglichkeit, die Gesamtmenge von Clustern zu erhalten wäre, die Kontrolle zu deaktivieren, ob die Markierung in einem aktuellen Darstellungs durch überwiegende die Funktion befindet, die Cluster erzeugt:

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

Arbeitsbeispiel

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