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

创建一个＆＃34;计算器＆＃34;做你想要的功能（总结标记的属性，表示＆＃34;人数和＃34;。

＆＃34;计算器＆＃34;的文档功能。返回具有以下属性的对象：

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

如果您为数据添加了一个属性＆＃34; number＆＃34;，您可以执行以下操作：

代码段

＆＃13;

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
    };
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

markerCluster一个组的标记

1 个答案: