Google Maps：处理多个重叠的群集

Question

我正在将Google Map与markerclusterer.js结合使用。我有2种类型的标记，可以使用2个不同的标记簇来处理。我的问题是当两个不同的群集重叠时如何处理这种情况

在这里可以找到简化的小提琴：http://jsfiddle.net/Anja_Reeft/01t4h8bo/2/

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
var markerCluster;
// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973],
  ['1', 'Title 2', 52.4357808, 4.981315699999973],
  ['2', 'Title 3', 52.4357808, 4.991315699999973],
  ['3', 'Title 4', 52.4357808, 4.991315699999973],
  ['4', 'Title 5', 52.4555687, 5.039231599999994]
];
/**
 * Function to init map
 */
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var styles = [[{
    url: 'https://i.postimg.cc/rFZwN4NH/people35.png',
    height: 35,
    width: 35,
    anchor: [16, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/0yL5Lq3d/people45.png',
    height: 45,
    width: 45,
    anchor: [24, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/q7yBr5Hf/people55.png',
    height: 55,
    width: 55,
    anchor: [32, 0],
    textColor: '#ffffff',
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/NfsK4BqK/conv30.png',
    height: 27,
    width: 30,
    anchor: [3, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/fRkkGCbZ/conv40.png',
    height: 36,
    width: 40,
    anchor: [6, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/xdz8CdH4/conv50.png',
    width: 50,
    height: 45,
    anchor: [8, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/y85WsRJR/heart30.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/0QGNYHVG/heart40.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/c1mH62g0/heart50.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/nrcnvVjZ/pin-35.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://i.postimg.cc/brCpLXkn/pin-45.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://i.postimg.cc/66YWBZgQ/pin-55.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }], [{
    url: 'https://i.postimg.cc/xCP0JNdt/pin.png',
    height: 48,
    width: 30,
    anchor: [-18, 0],
    textColor: '#ffffff',
    textSize: 10,
    iconAnchor: [15, 48]
  }]];


var clusterOptionsEmp = {
    zoomOnClick: false,
    styles: styles[0],
}


var clusterOptionsJob = {
    zoomOnClick: false,
    styles: styles[3],
}


  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  markerClusterEmp = new MarkerClusterer(map, [], clusterOptionsEmp);
  markerClusterJob = new MarkerClusterer(map, [], clusterOptionsJob);
  for (i = 0; i < markers1.length; i++) {
    if (i % 2 == 1 ) {
        addMarker(markerClusterEmp,markers1[i]);
    } else {
        addMarker(markerClusterJob,markers1[i]);
    }
  }
}
/**
 * Function to add marker to map
 */
function addMarker(markerCluster,marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];
  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });
  markerCluster.addMarker(marker1);
  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
  infowindow.setContent(content);
  infowindow.open(map, marker1);
  map.panTo(this.getPosition());
  map.setZoom(15);
    }
  })(marker1, content));

 google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster){
    var markers = cluster.getMarkers();
    var infoText = "Count : " + markers.length + "<br>";

    for (i = 0; i < markers.length; i++) {
      var title = markers[i].title;
      infoText += title + "<br>";
    }

       infowindow.setContent(infoText);
       infowindow.setPosition(cluster.getCenter());
       infowindow.open(map);      

});

}
google.maps.event.addDomListener(window, "load", initialize);

我不知道是否可以做到这一点，但我正在寻找一种方法来确定2种不同类型的簇是否重叠，如果重叠，请将它们收集在第三种类型的簇中。

我试图仅将标记添加到第三个群集中，但是在其他两个标记的上方仅添加了一个额外的新标记。我所有试图将一个群集添加到另一个群集的尝试都使代码失败。

我也一直在研究OverlappingMarkerSpiderfier，但我也可以使用它。

我希望有人对解决这种情况有解决方案或想法