網膜画像を使用してGoogleマップでMarker Clusterer Plusを使用する方法

Question

Marker ClustererPlus グーグルマップ上のマーカーをグループ化するには、enabletinaiconsオプションが機能しないようです。

// Custom style to alter the default font color (style is always the same).
var styles = [
    {
        url: 'PATH_TO_MY_66x66px_IMAGE',
        textColor: '#ddddd',
        textSize: 18,
        width: 33,
        height: 33,
    }
];

// Calculator function to determine which style to use (I only have one)
var calculator = function (markers, iconstyles){
    return{ text: markers.length.toString(), index:1};
};

// Set Options
var clusterOptions = {
    title: 'Cluster Title',
    enableRetinaIcons: true,
    styles: styles,
    calculator: calculator
}

// Add to map
new MarkerClusterer(this.map, this.markers, clusterOptions);

.

---

enableRetinaiconsオプションが機能しないように見えないように、画像はサイズの2倍に表示されます。

幅を66x66pxに設定すると、どちらも役に立ちません。

誰かがこれを正しく構成する方法を知っていますか？

Answer 1

これは明らかにMarker Clusterer Plusのバグです。実際にこのオプションを使用するコード内の唯一の場所はここにあります。

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
img += "'>";

.

それで、実際にはスプライトアイコンのクリッピングを無効にするだけでなく、必要な網膜アクションを実際に実行しません。アイコンのHTMLツリーは実際にこのようになります。

だからアイコンの周囲のDIVに適切な寸法が設定されていることがわかりますが、非常に画像（青いコード）には寸法が設定されていません。

Else Branchを追加するだけで、マーカーclusterライブラリにパッチをパッチして問題を解決しようとしました。

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
else {
    img += "width: " + this.width_ + "px;" + "height: " + this.height_ + "px;";
}
img += "'>";

.

機能しているようです：

完全なパッチライブラリ@Pastebin

テストの例 - > http://jsfiddle.net/rt28t/2/

バグを報告して提案したパッチとしてこれを追加することができます： - ）

Answer 2

私はこの質問が答えられたことを知っていますが、この問題を解決するもう1つの方法（そしておそらくより簡単な）SVGマーカーアイコンを使って です。そのように：

• あなたの解決策はどのデバイスピクセル密度
をサポートするでしょう
• ライブラリにパッチする必要はありません（原因となるすべての問題を持ちます）
• 現在のブラウザのサポートは非常に良いです - caniuse.com svg-img ブラウザの場合統計

Answer 3

サイズの2倍のアイコンをアップロードするだけです。

m1.png = 53x53 (normal) 106x106 (retina)
m2.png = 56x56 (normal) 112x112 (retina) 
m3.png = 66x66 (normal) 132x132 (retina)
m4.png = 78x78 (normal) 156x156 (retina)
m5.png = 90x90 (normal) 180x180 (retina)

.

そしてあなたのCSSに追加：

#map .cluster img {
    max-width: 100%;
}

.