MarkerClusterer:クラスターアイコンのアンカーオフセット
-
28-10-2019 - |
質問
GoogleマップMarkerClusterer(V3)によって作成されたクラスターアイコンをわずかに相殺しようとしています。既存のコードを変更するだけでなく、これを行う方法が見つかりません。誰かがアイデアを持っていますか?
カスタム画像URLを提供できるスタイルオブジェクトは、アンカープロパティを受け入れますが、これは生成されたマーカーアイテム数を相殺することです。
ありがとう!
解決
クラスターアイコンのPNGの片側に透明なスペースを追加することができます。そうすれば、中央に配置したいアイコンの部分が実際にはPNGの中心にあるようにすることができます。これにより、画像の重量が数バイト以上増加することはありません。
他のヒント
それを行う適切な方法は、 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);
受け入れられた答えは私にとって十分に機能しません - アイコン画像に透明なスペースを追加すると、オブジェクトのサイズが増加しているため、クリックとホバイのイベントの動作方法を変えることができます。
私は使用します anchorIcon
それが利用可能なものを除くプロパティ マーカークラスタープラス, 、他ではありません マーカークラスター プラグイン(私が使用している)。
マーカークラスターを特に使用したい人のために - あなたはオーバーライドすることができます 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;
};
次の2つの関数を変更することにより、Anchortextパラメーターをサポートするために、marcerclusterer.jsのコードを変更しました。
/**
* 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();
});
};
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;
.....
}