具有相同坐标的标记不会折叠

Question

簇是在“我的地图”上创建的，但当标记具有相同的地址时，单击簇时，工具提示不会显示。我正在使用Gmaps标记聚类器。代码示例：`function initMap（）{//map options var options={zoom:7，center:{lat:53.3938131，lng:-7.858913}}}var map=new google.maps.map（document.getElementById（'map'），options）；//添加一个marker cluster来管理标记。

          //Add marker
          var markers = [

            //Dublin
            {
              coords:{lat:53.338741, lng:-6.261563},
              iconImage:'assets/img/places/stparkdublin.png',
              content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
            },
            {
              //coords:{lat:53.3755012,lng:-6.2735677},
                        coords:{lat:53.338741, lng:-6.261563},
              iconImage:'assets/img/places/botanic garden.png',
              content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
            }
          ];

          // Loop through markers
          var gmarkers = [];
          for(var i = 0; i < markers.length; i++){
            gmarkers.push(addMarker(markers[i]));

          }

          //Add MArker function
          function addMarker(props){
            var marker = new google.maps.Marker({
              position:props.coords,
              map:map,

            });

            /* if(props.iconImage){
              marker.setIcon(props.iconImage);
            } */

            //Check content
            if(props.content){
              var infoWindow = new google.maps.InfoWindow({
                content:props.content
              });
              marker.addListener('click',function(){
                infoWindow.open(map,marker);
              });
            }
            return marker;
          }
        var markerCluster = new MarkerClusterer(map, gmarkers, 
          {
            imagePath:
            'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
          });
        }
      google.maps.event.addDomListener(window, 'load', initMap)
    </script>

'标记扣

Answer 1

解决了的：

           var options = {
             minClusterSize: 2,
             zoomOnClick: true,
             maxZoom: 20 
           };
           markerCluster = new MarkerClusterer(map, allMarkers, options);
           google.maps.event.addListener(markerCluster, 'clusterclick', 
              function(cluster) {
                var content = '';
                content += '<div class="custom-marker-box">';
                // Convert the coordinates to an MVCObject
                var info = new google.maps.MVCObject;
                info.set('position', cluster.center_);
                //Get markers
                var marks_in_cluster = cluster.getMarkers();

                console.log(marks_in_cluster);

                for (var z = 0; z < marks_in_cluster.length; z++) {
                    content += marks_in_cluster[z].args["title"]; 
                    console.log(content);
                }

                var infowindow = new google.maps.InfoWindow({
                  content: content
                });
                content += '</div>';
                infowindow.close(); // closes previous open ifowindows
                infowindow.setContent(content); 
                infowindow.open(map, info);
              });

Answer 2

在您的示例中，您创建了clusterer，但没有指定群集的最大缩放级别。这意味着具有相同坐标的两个标记永远不会在信息窗口中显示为单独的标记。因此，您应该在clusterer选项中添加maxZoom参数。

另一方面，为了分离具有相同坐标的两个标记，您应该使用重叠标记Spiderfer。当你点击重叠标记时，你会看到所有的标记。

我在JSFIDLE中修改了您的示例，并为集群添加了max zoom 19，因此在zoom 20或21中，您将看到标记，单击将看到分离的标记

请看下面的代码片段

function initMap() {
  // map options
  var options = {
    zoom:7,
    center:{lat:53.3938131, lng:-7.858913}
  }
  var map = new google.maps.Map(document.getElementById('map'), options);

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

  // Add a marker clusterer to manage the markers.
  //Add marker
  var markers = [
    //Dublin
    {
      coords:{lat:53.338741, lng:-6.261563},
      iconImage:'assets/img/places/stparkdublin.png',
      content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
    },
    {
      //coords:{lat:53.3755012,lng:-6.2735677},
      coords:{lat:53.338741, lng:-6.261563},
      iconImage:'assets/img/places/botanic garden.png',
      content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
    }
  ];

  // Loop through markers
  var gmarkers = [];
  for(var i = 0; i < markers.length; i++){
    gmarkers.push(addMarker(markers[i]));
  }

  //Add MArker function
  function addMarker(props){
    var marker = new google.maps.Marker({
      position:props.coords,
      map:map
    });

    //Check content
    if(props.content){
      var infoWindow = new google.maps.InfoWindow({
        content:props.content
      });
      marker.addListener('click',function(){
        infoWindow.open(map,marker);
      });
    }
        
    oms.trackMarker(marker);
        
    return marker;
  }
  
  var markerCluster = new MarkerClusterer(map, gmarkers, 
    {
      maxZoom: 19,
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}
  
google.maps.event.addDomListener(window, 'load', initMap)

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>