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

Question

在我的地图上创建了集群，但是当标记具有相同的地址时，单击集群时，不会显示工具提示。我正在使用 Gmaps Marker Clusterer。代码示例：` 函数初始化映射（）{ // 地图选项 变量选项 = { 缩放：7， 中心：{纬度：53.3938131，液化天然气：-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

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

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

我从 jsfiddle 修改了您的示例并添加了最大缩放 19 以进行聚类，因此在缩放 20 或 21 时您会看到标记，点击时您会看到分离的标记

看看下面的代码sn-p

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