javascript - google maps 2 markers same location

Punteros superpuestos con MarkerClustererPlus y OverlappingMarkerSpiderfier

Question

Tengo este mapa y se muestran punteros basados ​​en usuarios long y lat. ahora tengo un problema con OverlappingMarkerSpiderfier. cuando hay más de 1 usuarios con la misma longitud y lat. por ejemplo: 5 personas viven en el mismo edificio. Necesito OverlappingMarkerSpiderfier para mostrar el recuento y luego hacer clic para deslizarlo. de forma predeterminada, OverlappingMarkerSpiderfier no funciona de esa manera.

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52, 8),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById(''map''), mapOptions);

    var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});

    markerClusterer.setMap(map);

aquí está el jsfiddle http://jsfiddle.net/gL3L7zso/62/

como puede ver, cuando hago clic en el campo battefield 3. muestra un puntero detrás de él oculto 3. Necesito que sea el mismo pero, muestre el recuento de punteros escondidos detrás.

apreciar cualquier solución para esto.

actualización: para hacer la pregunta más clara.

violín actualizado: http://jsfiddle.net/gL3L7zso/68

Answer 1

Una opción sería poner una etiqueta en cada marcador en el "clúster" y colocar el marcador con la etiqueta más alta en la parte superior.

oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
  zIndex: markersNear.length
});

prueba de concepto violín

fragmento de código:

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url(''tipbox.gif'') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
    minClusterZoom = 14;
    markerClusterer.setMaxZoom(minClusterZoom);
    

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(52.030656,8.528849),
    zoom: 14
  };
  map = new google.maps.Map(document.getElementById(''map''), mapOptions);
  google.maps.event.addListenerOnce(map, ''idle'', function() {
    var oms = new OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      markersWontHide: true,
          keepSpiderfied: true
        });
    oms.addListener(''unspiderfy'', function(spidered, unspidered) {
      for (var i = 0; i < spidered.length; i++) {
        spidered[i].setLabel("" + (i + 1));
        spidered[i].setOptions({
          zIndex: i
        });
      }
    });
    markerClusterer.setMap(map);
    google.maps.event.addListener(map.data, ''addfeature'', function(e) {
      if (e.feature.getGeometry().getType() === ''Point'') {
        var marker = new google.maps.Marker({
          position: e.feature.getGeometry().get(),
          title: e.feature.getProperty(''name''),
          map: map
        });
        google.maps.event.addListener(marker, ''click'', function(marker, e) {
          return function() {

            var myHTML = e.feature.getProperty(''name'');
            boxText.innerHTML = "<div style=''text-align: center;''><b>" + myHTML + "</b></div>";
            infobox.setPosition(e.feature.getGeometry().get());
            infobox.setOptions({
              pixelOffset: new google.maps.Size(0, 0)
            });
            infobox.open(map);
          };
        }(marker, e));
        markerClusterer.addMarker(marker);
        oms.addMarker(marker);
        var markersNear = oms.markersNearMarker(marker, false);
        marker.setLabel("" + (markersNear.length + 1));
        marker.setOptions({
          zIndex: markersNear.length
        });
      }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function() {
      infobox.close();
    });
  });
}
google.maps.event.addDomListener(window, ''load'', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>