Google 点彼此靠近时地图标记聚类不打开

Google map Marker Clustering not open when the point near each others

我使用 Google 地图 API v3。我在下面有这个对象。我计算了它们之间的距离,大约是 1 米,我的问题是当我放大最后一个集群时从未打开,我看不到这些点。我用marker Cluster(因为我有50k多点)。

var locations = [
  {lat: 41.2387918, lng: 65.00829530},
  {lat: 41.23880147, lng: 65.00829530}
]

注意:我找到了一些答案,他们建议为每个点添加一个随机数,但我想要确切的位置。

您需要设置 MarkerClusterermaxZoom

来自the documentation

maxZoom: number
The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels.

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  maxZoom: 20,
});

proof of concept fiddle

代码片段:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });
  var bounds = {
    north: 41.238854621921156,
    east: 65.00841750814823,
    south: 41.23873864802776,
    west: 65.00817309185175
  }
  map.fitBounds(bounds);
  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
    maxZoom: 20,
  });
}
var locations = [{
    lat: 41.2387918,
    lng: 65.00829530
  },
  {
    lat: 41.23880147,
    lng: 65.00829530
  }
]
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>