Question

我想使用谷歌地图将所有标记与相同的簇大小组合在一起。

我尝试过Google Map支持的MarkerClusterer，但群集大小不同。

我有什么例子吗？

感谢您的帮助。

Answer 1

MarkerClusterer 库使用基于网格的群集   将地图划分为一定大小的正方形的技术（   每个缩放级别的大小更改），并将标记分组到每个   方格。它在特定标记处创建一个簇，并添加   与集群绑定的标记。它重复这个过程   直到所有标记都分配到最近的基于网格的标记   基于地图缩放级别的聚类。如果标记在边界内   Maps JavaScript API确定了多个现有集群   标记与每个群集的距离，并将其添加到最近的群集   群集。

您可以设置 MarkerClusterer 选项来调整群集   位置反映所有标记之间的平均距离   包含在其中。你也可以自定义    MarkerClusterer 修改其他参数，如网格大小，群集   图标，群集文本等。

看看下面的例子：

我已使用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>

如需高级示例，请查看此处 - ＆gt; An example of MarkerClusterer v3并且对于所有示例，请点击here。

通过谷歌地图将标记分组与相同的簇大小放在一起

1 个答案: