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

我正在使用谷歌地图对标记进行分组，但enableretinacons选项似乎不起作用

// 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也没有帮助

---

有人知道如何正确配置吗？

这显然是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 += "'>";

img=”“；

因此，他们实际上只禁用了精灵图标的剪辑，但实际上并没有运行所需的视网膜操作。图标的HTML树实际上如下所示：

因此，您可以看到图标周围的div设置了正确的尺寸（33x33），但图像本身（蓝色代码）没有设置任何尺寸。

我试图通过修补marker clusterer库来解决此问题，只需添加一个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 += "'>";

img=”“；

这似乎有效： 测试示例-

---

您可以报告一个bug并将其添加为建议的补丁：-）

我知道这个问题已经得到了回答，但是解决这个问题的另一种方法（可能更简单）就是使用SVG标记图标。这样：

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

---

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

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%;
}

---

这是有效的，谢谢你的解决方案！当网站允许我的时候，我会奖励赏金。这对聚集标记非常有效。单个标记仍以所需比例的2倍显示。我已经在标记本身上设置了以下选项：size:new google.maps.size（40,40），scaledSize:new google.maps.size（20,20），但是这些设置似乎会被删除。有什么想法/建议吗？@printr:size和scaledSize选项应该在marker.icon上设置，而不是直接在marker上设置。不要将url用作图标的值。marker.icon={url:'/images/map icons sprite.png'，锚定：{'x'：16，'y'：16}，大小：{'width'：32，'height'：32}，缩放大小：{'width'：320，'height'：32}，//图像是640x64原点：{'x'：0，'y'：0}//这是左侧的第一个图标}