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

Question

集群是在我的地图上创建的，但是当标记具有相同的地址时，单击集群时，不会显示工具提示。我正在使用 Gmaps 标记聚类器。代码示例：` 函数 initMap(){ // 地图选项变种选项= { zoom:7, 中心：{lat:53.3938131, lng:-7.858913} } var map = new google.maps.Map(document.getElementById('map'),options); // 添加一个标记聚类器来管理标记。

          //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>

` Marker classter

Answer 1

在您的示例中，您创建了聚类器并且没有指定聚类的最大缩放级别。这意味着具有相同坐标的两个标记永远不会显示为带有信息 windows 的单独标记。所以你应该在集群选项中添加 maxZoom 参数。

另一方面，为了用相同的坐标分隔两个标记，您应该使用 Overlapping Marker Spiderfier。当您单击重叠标记时，您将看到所有标记。

我从 jsfiddle 修改了你的例子并添加了最大缩放 19 用于聚类，所以在缩放 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>

Answer 2

已解决：

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

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

Markers which have identical coordinates don't collapse

google-maps

marker