markerclusterer: смещение привязки для значков кластера - PullRequest
Новая
       1

markerclusterer: смещение привязки для значков кластера

6 голосов
/ 01 февраля 2011

Я пытаюсь немного сместить значки кластера, созданные Google Maps Markerclusterer (V3).Если не считать модификации существующего кода, я не могу найти способ сделать это.У кого-нибудь есть идея?

Объект Styles, в котором вы можете указать пользовательский URL-адрес изображения, принимает свойство привязки, но это должно компенсировать количество сгенерированных элементов маркера.

Спасибо!

Ответы [ 5 ]

4 голосов
/ 23 ноября 2012

Правильный способ сделать это - настроить свойство anchorIcon следующим образом: 

var clusterStyles = [
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
}
];

var mcOptions = {
    styles: clusterStyles
};

var markerCluster = new MarkerClusterer(map, markers, mcOptions);
3 голосов
/ 04 декабря 2013

Принятый ответ не работает для меня достаточно хорошо - добавление прозрачного пространства к изображению значка может изменить поведение событий щелчка и наведения мыши из-за увеличенного размера объекта.

С другой стороны, свойство anchorIcon существует только в Marker Clusterer Plus , но не в другом плагине Marker Clusterer . Для тех, кто по какой-то причине не хочет переключать плагины - вы можете переопределить ClusterIcon.prototype.getPosFromLatLng_. Объект ClusterIcon является глобальным, поэтому мы можем сделать это в наших собственных скриптах, не вмешиваясь в исходный код плагина. Это прикрепит маркер к нижней части иконки: 

ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  pos.x -= parseInt(this.width_ / 2);
  pos.y -= parseInt(this.height_);
  return pos;
};
1 голос
/ 26 августа 2015

Я изменил код marcerclusterer.js для поддержки параметра anchorText, изменив следующие две функции: 

/**
 * Sets the icon to the the styles.
 */
ClusterIcon.prototype.useStyle = function() {
  var index = Math.max(0, this.sums_.index - 1);
  index = Math.min(this.styles_.length - 1, index);
  var style = this.styles_[index];
  this.url_ = style['url'];
  this.height_ = style['height'];
  this.width_ = style['width'];
  this.textColor_ = style['textColor'];
  this.anchor_ = style['anchor'];
  this.anchorText_ = style['anchorText']; //added to support anchorText parameter by Frane Poljak, Locastic
  this.textSize_ = style['textSize'];
  this.backgroundPosition_ = style['backgroundPosition'];
};


/**
 * Adding the cluster icon to the dom.
 * @ignore
 */
ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);

      ////added to support anchorText parameter by Frane Poljak, Locastic

      if (typeof this.anchorText_ === 'object' && typeof this.anchorText_[0] === 'number' && typeof this.anchorText_[1] === 'number') {
          this.div_.innerHTML = '<span style="position:relative;top:' + String(this.anchorText_[0]) + 'px;left:' + String(this.anchorText_[1]) + 'px;">' + this.sums_.text + '</span>'
      } else this.div_.innerHTML = this.sums_.text;
  } 

  var panes = this.getPanes();
  panes.overlayMouseTarget.appendChild(this.div_);

  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};
0 голосов
/ 03 июля 2014

свойства anchor / anchorIcon / anchorText не работали для меня ... поэтому я сделал обходной путь:

Я использую функцию setCalculator() для установки текста кластера:

https://google -maps-utility-library-v3.googlecode.com / svn / trunk / markerclusterer / docs / reference.html

при настройке свойства текста кластера я обертываюзначение с <span>, примерно так: 

markerCluster.setCalculator(function (markers) {
   return {
      text: '<span class="myClass">' + value+ '</span>',
      index: index                   
   };
});

теперь вы можете контролировать положение метки кластера с помощью ".myClass": 

span.myClass{
   position: relative;
   top: -15px;
   .....
}
0 голосов
/ 08 апреля 2011

Вы можете добавить некоторое прозрачное пространство на одну сторону PNG иконки вашего кластера, чтобы часть значка, которую вы хотели бы центрировать, была также центрирована в вашем PNG. Это не должно увеличивать вес вашего изображения более чем на несколько байтов.

...