markerCluster 组的一个标记

Question

我正在使用markerCluster，效果很好。

这是它如何使用 2 个标记的代码：

  window.onload = function() {
      // cluster marker
      var clusterMarker = [];

      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng( 50, 3),
        zoom: 6,
        mapTypeId: 'terrain'
      });


      // Some sample data
      var sampleData = [{lat:50, lng:3}, {lat:50, lng:3.02}];


      for (var i = 0; i < sampleData.length; i ++) {

        var point = sampleData[i];
        var location = new google.maps.LatLng(point.lat, point.lng);

        // create marker at location
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });

        // needed to cluster marker
        clusterMarker.push(marker);
      }

      new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
    }

以及不同缩放级别的结果：

如果我缩小，markerCluster 会计算一个区域中的标记数。我想改变它，使一些标记代表多个人。因此，如果我有一个代表 21 人的大标记和一个代表 1 人的第二个标记，那么如果我缩小我希望看到蓝色标记上的数字 22，大标记上应该有 21。有这样的可能吗？

例如，我想得到以下结果，即使我只使用两个标记：

Answer 1

创建一个“计算器”函数来做你想做的事（对指示“人数”的标记的属性求和。

“计算器”功能的文档。返回具有属性的对象：

• text（集群上出现的文字）
• index（样式数组的索引以访问该集群的样式。

/**
 *  The function for calculating the cluster icon image.
 *
 *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 *  @param {number} numStyles The number of styles available.
 *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 *  @private
 */
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
  var index = 0;
  var count = markers.length;
  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index
  };
};

如果您向数据添加属性“数字”，您可以执行以下操作：

代码 sn-p：

window.onload = function() {
  // cluster marker
  var clusterMarker = [];

  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(50, 3),
    zoom: 6,
    mapTypeId: 'terrain'
  });


  // Some sample data
  var sampleData = [{
    lat: 50,
    lng: 3,
    number: 20

  }, {
    lat: 50,
    lng: 3.02,
    number: 1
  }];


  for (var i = 0; i < sampleData.length; i++) {

    var point = sampleData[i];
    var location = new google.maps.LatLng(point.lat, point.lng);

    // create marker at location
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      number: sampleData[i].number,
      title: "" + sampleData[i].number
    });

    // needed to cluster marker
    clusterMarker.push(marker);
  }

  var clusterer = new MarkerClusterer(map, clusterMarker, {
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m',
    maxZoom: 15
  });

  clusterer.setCalculator(function(markers, numStyles) {
    var index = 0;
    var count = 0;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].number) {
        count += markers[i].number;
      } else {
        count++;
      }
    }
    var dv = markers.length;
    while (dv !== 0) {
      dv = parseInt(dv / 10, 10);
      index++;
    }

    index = Math.min(index, numStyles);
    return {
      text: count,
      index: index
    };
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

<div id="map"></div>