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

Posted 2023-05-09

【中文标题】具有相同坐标的标记不会折叠

【英文标题】：Markers which have identical coordinates don't collapse

【发布时间】：2020-11-20 15:40:40

【问题描述】：

在我的地图上创建了集群，但是当标记具有相同的地址时，单击集群时，不会显示工具提示。我正在使用 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

【问题讨论】：

代码示例：jsfiddle.net/h67m9q8t

【参考方案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>

【参考方案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);
              );