javascript - 通过谷歌地图将具有相同簇大小的标记分组在一起

Question

我想使用谷歌地图将所有靠近的标记分组为相同的簇大小。

我尝试了Google Map支持的MarkerClusterer，但簇大小不同。

有给我的例子吗？

感谢您的帮助。

Answer 1

Understanding marker clustering

The MarkerClusterer library uses the grid-based clustering technique that divides the map into squares of a certain size (the size changes at each zoom level), and groups the markers into each square grid. It creates a cluster at a particular marker, and adds markers that are in its bounds to the cluster. It repeats this process until all markers are allocated to the closest grid-based marker clusters based on the map's zoom level. If markers are in the bounds of more than one existing cluster, the Maps JavaScript API determines the marker's distance from each cluster, and adds it to the closest cluster.

You can set a MarkerClusterer option to adjust the cluster position to reflect the average distance between all the markers that are contained within it. You can also customize the MarkerClusterer to modify other parameters like the grid size, the cluster icon, cluster text, among others.

看看下面的例子:

我已使用gridSize参数为我的标记设置分组值。这样您就可以实现您想要的目标。

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  // 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',
    gridSize: 10
  });
}
var locations = [{
    lat: -31.563910,
    lng: 147.154312
  },
  {
    lat: -33.718234,
    lng: 150.363181
  },
  {
    lat: -33.727111,
    lng: 150.371124
  },
  {
    lat: -33.848588,
    lng: 151.209834
  },
  {
    lat: -33.851702,
    lng: 151.216968
  },
  {
    lat: -34.671264,
    lng: 150.863657
  },
  {
    lat: -35.304724,
    lng: 148.662905
  },
  {
    lat: -36.817685,
    lng: 175.699196
  },
  {
    lat: -36.828611,
    lng: 175.790222
  },
  {
    lat: -37.750000,
    lng: 145.116667
  },
  {
    lat: -37.759859,
    lng: 145.128708
  },
  {
    lat: -37.765015,
    lng: 145.133858
  },
  {
    lat: -37.770104,
    lng: 145.143299
  },
  {
    lat: -37.773700,
    lng: 145.145187
  },
  {
    lat: -37.774785,
    lng: 145.137978
  },
  {
    lat: -37.819616,
    lng: 144.968119
  },
  {
    lat: -38.330766,
    lng: 144.695692
  },
  {
    lat: -39.927193,
    lng: 175.053218
  },
  {
    lat: -41.330162,
    lng: 174.865694
  },
  {
    lat: -42.734358,
    lng: 147.439506
  },
  {
    lat: -42.734358,
    lng: 147.501315
  },
  {
    lat: -42.735258,
    lng: 147.438000
  },
  {
    lat: -43.999792,
    lng: 170.463352
  },
  {
    lat: -43.998792,
    lng: 170.463352
  },
  {
    lat: -43.999792,
    lng: 170.413352
  },
  {
    lat: -43.999000,
    lng: 170.463000
  }
]

/* 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;
}

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBplDzEjv3SUmKPKj0IY-Iq4u_nB3z2Q1I&callback=initMap">
</script>
<div id="map"></div>

有关高级示例，请查看此 -> An example of MarkerClusterer v3对于所有示例，请单击 here .