markerCluster ein Marker für eine Gruppe

Question

Ich benutze markerCluster und es funktioniert super. Hier

ist der Code, wie es mit 2 Marker funktioniert:

window.onload = function() { 
     // cluster marker 
     var clusterMarker = []; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(50, 3), 
     zoom: 6, 
     mapTypeId: 'terrain' 
     }); 


     // Some sample data 
     var sampleData = [{lat:50, lng:3}, {lat:50, lng:3.02}]; 


     for (var i = 0; i < sampleData.length; i ++) { 

     var point = sampleData[i]; 
     var location = new google.maps.LatLng(point.lat, point.lng); 

     // create marker at location 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 

     // needed to cluster marker 
     clusterMarker.push(marker); 
     } 

     new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15}); 
    } 

und das Ergebnis auf verschiedenen Zoomstufen:

Wenn ich Auszoomen markerCluster zählt die Anzahl der Marker in einem Bereich. Ich würde es gerne so ändern, dass einige Marker mehrere Personen repräsentieren. Wenn ich also einen großen Marker habe, der 21 Personen repräsentiert, und einen zweiten Marker, der eine Person repräsentiert, dann würde ich gerne die Zahl 22 auf dem blauen Marker sehen, wenn ich herauszoomen würde, und der große Marker sollte 21 haben. Ist so etwas möglich?

So zum Beispiel würde Ich mag das folgende Ergebnis erhalten, auch wenn ich nur zwei Marker verwenden:

Answer 1

erstellen „Rechner“ -Funktion, das tut, was Sie (Summen die Eigenschaft des Markers wollen dass zeigt die „Zahl der Menschen,“

Dokumentation für „Taschenrechner“ Funktion gibt ein Objekt mit den Eigenschaften:..

• text (der Text auf dem Cluster erscheinen)
• index (der Index in das Styles-Array, um auf den Stil für diesen Cluster zuzugreifen.

/** 
* The function for calculating the cluster icon image. 
* 
* @param {Array.<google.maps.Marker>} markers The markers in the clusterer. 
* @param {number} numStyles The number of styles available. 
* @return {Object} A object properties: 'text' (string) and 'index' (number). 
* @private 
*/ 
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) { 
    var index = 0; 
    var count = markers.length; 
    var dv = count; 
    while (dv !== 0) { 
    dv = parseInt(dv/10, 10); 
    index++; 
    } 

    index = Math.min(index, numStyles); 
    return { 
    text: count, 
    index: index 
    }; 
}; 

Wenn Sie eine Immobilie zu Ihren Daten hinzufügen, "Nummer", könnte man so etwas tun:

Code-Schnipsel:

window.onload = function() { 
 
    // cluster marker 
 
    var clusterMarker = []; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: new google.maps.LatLng(50, 3), 
 
    zoom: 6, 
 
    mapTypeId: 'terrain' 
 
    }); 
 

 

 
    // Some sample data 
 
    var sampleData = [{ 
 
    lat: 50, 
 
    lng: 3, 
 
    number: 20 
 

 
    }, { 
 
    lat: 50, 
 
    lng: 3.02, 
 
    number: 1 
 
    }]; 
 

 

 
    for (var i = 0; i < sampleData.length; i++) { 
 

 
    var point = sampleData[i]; 
 
    var location = new google.maps.LatLng(point.lat, point.lng); 
 

 
    // create marker at location 
 
    var marker = new google.maps.Marker({ 
 
     position: location, 
 
     map: map, 
 
     number: sampleData[i].number, 
 
     title: "" + sampleData[i].number 
 
    }); 
 

 
    // needed to cluster marker 
 
    clusterMarker.push(marker); 
 
    } 
 

 
    var clusterer = new MarkerClusterer(map, clusterMarker, { 
 
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m', 
 
    maxZoom: 15 
 
    }); 
 

 
    clusterer.setCalculator(function(markers, numStyles) { 
 
    var index = 0; 
 
    var count = 0; 
 
    for (var i = 0; i < markers.length; i++) { 
 
     if (markers[i].number) { 
 
     count += markers[i].number; 
 
     } else { 
 
     count++; 
 
     } 
 
    } 
 
    var dv = markers.length; 
 
    while (dv !== 0) { 
 
     dv = parseInt(dv/10, 10); 
 
     index++; 
 
    } 
 

 
    index = Math.min(index, numStyles); 
 
    return { 
 
     text: count, 
 
     index: index 
 
    }; 
 
    }); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
 

 
<div id="map"></div>