8

Google Maps Markerclusterer (V3) によって作成されたクラスター アイコンを少しオフセットしようとしています。既存のコードを変更する以外に、これを行う方法が見つかりません。誰かアイデアがありますか？

カスタム イメージ URL を指定できる Styles オブジェクトはアンカー プロパティを受け入れますが、これは生成されたマーカー アイテム数をオフセットするためのものです。

ありがとう！

4

5 に答える 5

5

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);
于 2012-11-23T09:52:27.933 に答える
4

受け入れられた答えは私には十分に機能しません.アイコン画像に透明なスペースを追加すると、オブジェクトのサイズが大きくなるため、クリックイベントとホバーイベントの動作が変わる可能性があります。

プロパティを使用しますが、それはMarker Clusterer PlusanchorIconでのみ利用可能であり、他のMarker Clustererプラグイン (私が使用している) では利用できません。

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;
};
于 2013-12-03T23:26:04.690 に答える
1

次の 2 つの関数を変更して、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();
  });
};
于 2015-08-26T12:37:27.500 に答える
0

アンカー/アンカーアイコン/アンカーテキストのプロパティは私にとってはうまくいきませんでした...だから私は一種の回避策を作りました:

関数を使用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;
   .....
}
于 2014-07-03T11:09:34.363 に答える
0

クラスタ アイコンの PNG の片側に透明なスペースを追加して、中央に配置したいアイコンの部分が実際に PNG の中央にも配置されるようにすることができます。これにより、画像の重みが数バイト以上増加することはありません。

于 2011-04-08T13:52:26.237 に答える