javascript - MarkerClustererPlus 如何为聚类图像设置不同的尺寸？

Question

我正在尝试制作一个聚类图，根据聚类大小调整图标的大小。 我正在使用 masterclusterplus 库，并且我已经进行了一些调整，以便能够在同一张 map 上拥有多个组。 我已经关注了这个问题:MarkerClustererPlus: set icon color/url independent of size 组中的每个圆都有相同的半径，我不知道如何更改它。

代码:

function loadMapData() {

    var me = this;

    var map = document.getElementById("map");

    var lat = 50;
    var long = 12;
    var type = google.maps.MapTypeId["ROADMAP"];
    var zoom = 4;

    var center = new google.maps.LatLng(lat, long);

    var options = {
        'zoom': zoom,
        'center': center,
        'mapTypeId': type
    };

    var map = new google.maps.Map(map, options);
    var markers = [];

    var maxLat = 70;
    var minLat = 37;
    var maxLong = 50;
    var minLong = -8;


    for (var j = 0; j < 300; j++) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(me.getRandom(minLat, maxLat),
                                             me.getRandom(minLong, maxLong)),
        });
        markers.push(marker);
    }


    var mcOptions = {
        enableRetinaIcons: true,
        styles: [{
            textColor: 'black',
            url: '/mapapp/themes/4.svg',
            "height": 80,
            "width": 80
        }]
    };

    var mc = new MarkerClusterer(map, markers, mcOptions);


    var sizes = [];
    for (var j = 0; j < 300; j++) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(me.getRandom(minLat, maxLat),
                                             me.getRandom(minLong, maxLong)),
        });

        markers.push(marker);

        var r = j + 30;
        sizes.push(r);
    }

    var mcOptions = {
        enableRetinaIcons: true,
        imageSizes: [20,30,40,50,60,70],
         styles: [{
            textColor: 'black',
            url: '/mapapp/themes/3.svg',
             width: 40,
             height: 40
        }]
    };
    var mc = new MarkerClusterer(map, markers, mcOptions);

}



function getRandom(min, max) {
    return Math.random() * (max - min + 1) + min;
}

Answer 1

如果不修改库，这是不可能的，因为库需要一组预定义的样式。

通过 CSS 而不是图像创建圆圈的可能方法:

重写createCss方法来为集群应用动态大小:

ClusterIcon.prototype.createCss = function(pos) {
  var size = Math.min(this.cluster_.getMarkers().length + 10,
      100 //possible max-size of a cluster-icon
    ),

    style = ['border-radius : 50%',
      'line-height   : ' + size + 'px',
      'cursor        : pointer',
      'position      : absolute',
      'top           : ' + pos.y + 'px',
      'left          : ' + pos.x + 'px',
      'width         : ' + size + 'px',
      'height        : ' + size + 'px'
    ];
  return style.join(";") + ';';
};

function randPos() {
  return new google.maps.LatLng(((Math.random() * 16000 - 8000) / 100), ((Math.random() * 34000 - 17000) / 100));
}

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var groups = {
    a: {
      markers: [],
      mc: null,
      color: 'red'
    },
    b: {
      markers: [],
      mc: null,
      color: 'gold'
    },
    c: {
      markers: [],
      mc: null,
      color: 'purple'
    }
  };
  for (var k in groups) {
    for (var i = 0; i < 300; ++i) {
      groups[k].markers.push(new google.maps.Marker({
        map: map,
        position: randPos()
      }));
    }
    groups[k].mc = new MarkerClusterer(map,
      groups[k].markers, {
        enableRetinaIcons: true,
        clusterClass: 'cluster cluster_' + groups[k].color
      });
  }


}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  padding: 0;
  margin: 0;
}
.cluster {
  display: table;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.cluster img {
  display: none
}
.cluster div {
  color: inherit !important;
  display: table-cell;
  vertical-align: middle;
  width: 100% !important;
  height: 100% !important;
  line-height: inherit !important;
}
/*custom cluster-styles*/

.cluster_red {
  background: red;
}
.cluster_gold {
  background: gold;
}
.cluster_purple {
  background: purple;
  color: #fff !important
}

<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

使用背景图像的示例(通过 svg 的星星，仅更改了 CSS)

ClusterIcon.prototype.createCss = function(pos) {
  var size = Math.min(this.cluster_.getMarkers().length + 20,
      100 //possible max-size of a cluster-icon
    ),

    style = ['border-radius : 50%',
      'line-height   : ' + size + 'px',
      'cursor        : pointer',
      'position      : absolute',
      'top           : ' + pos.y + 'px',
      'left          : ' + pos.x + 'px',
      'width         : ' + size + 'px',
      'height        : ' + size + 'px'
    ];
  return style.join(";") + ';';
};

function randPos() {
  return new google.maps.LatLng(((Math.random() * 16000 - 8000) / 100), ((Math.random() * 34000 - 17000) / 100));
}

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var groups = {
    a: {
      markers: [],
      mc: null,
      color: 'red'
    },
    b: {
      markers: [],
      mc: null,
      color: 'gold'
    },
    c: {
      markers: [],
      mc: null,
      color: 'purple'
    }
  };
  for (var k in groups) {
    for (var i = 0; i < 300; ++i) {
      groups[k].markers.push(new google.maps.Marker({
        map: map,
        position: randPos()
      }));
    }
    groups[k].mc = new MarkerClusterer(map,
      groups[k].markers, {
        enableRetinaIcons: true,
        clusterClass: 'cluster cluster_' + groups[k].color
      });
  }


}
google.maps.event.addDomListener(window, 'load', initialize);

      html,
      body,
      #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .cluster {
        display: table;
        background-size: cover;
      }
      .cluster img {
        display: none
      }
      .cluster div {
        color: inherit !important;
        display: table-cell;
        vertical-align: middle;
        width: 100% !important;
        height: 100% !important;
        line-height: inherit !important;
      }
      /*custom cluster-styles*/
      .cluster_red {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0icmVkIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IgoJMjU5LjIxNiwyOS45NDIgMzMwLjI3LDE3My45MTkgNDg5LjE2LDE5Ny4wMDcgMzc0LjE4NSwzMDkuMDggNDAxLjMzLDQ2Ny4zMSAyNTkuMjE2LDM5Mi42MTIgMTE3LjEwNCw0NjcuMzEgMTQ0LjI1LDMwOS4wOCAKCTI5LjI3NCwxOTcuMDA3IDE4OC4xNjUsMTczLjkxOSAiLz4KPC9zdmc+);
      }
      .cluster_gold {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0iZ29sZCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIKCTI1OS4yMTYsMjkuOTQyIDMzMC4yNywxNzMuOTE5IDQ4OS4xNiwxOTcuMDA3IDM3NC4xODUsMzA5LjA4IDQwMS4zMyw0NjcuMzEgMjU5LjIxNiwzOTIuNjEyIDExNy4xMDQsNDY3LjMxIDE0NC4yNSwzMDkuMDggCgkyOS4yNzQsMTk3LjAwNyAxODguMTY1LDE3My45MTkgIi8+Cjwvc3ZnPg==);
      }
      .cluster_purple {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0icHVycGxlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IgoJMjU5LjIxNiwyOS45NDIgMzMwLjI3LDE3My45MTkgNDg5LjE2LDE5Ny4wMDcgMzc0LjE4NSwzMDkuMDggNDAxLjMzLDQ2Ny4zMSAyNTkuMjE2LDM5Mi42MTIgMTE3LjEwNCw0NjcuMzEgMTQ0LjI1LDMwOS4wOCAKCTI5LjI3NCwxOTcuMDA3IDE4OC4xNjUsMTczLjkxOSAiLz4KPC9zdmc+);
        color: #fff !important
      }

<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>