如何在带有视网膜图像的谷歌地图上使用Marker Clusterer Plus

Question

我正在使用Marker Clusterer Plus对Google地图上的标记进行分组，但enableRetinaIcons选项似乎不起作用。

// 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选项似乎不起作用，图像显示两倍大小。

将宽度设置为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设置了正确的尺寸（33x33），但图像（蓝色代码）没有设置任何尺寸。

我尝试通过修补标记聚类器库来解决问题，只需添加一个else分支：

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 += "'>";

似乎有效：

Complete patched library @pastebin

测试示例 - http://jsfiddle.net/Rt28T/2/

您可以报告错误并将其添加为建议的补丁： - ）

Answer 2

我知道这个问题已得到解答，但解决此问题的另一种方法（可能更容易）只是使用SVG标记图标。那样：

• 您的解决方案将支持任何设备像素密度
• 您不需要修补库（可能导致所有问题）
• 当前的浏览器支持非常好 - 请检查caniuse.com svg-img浏览器统计信息

Answer 3

只需上传两倍大小的图标：

if

并添加到您的CSS：

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)