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

【问题标题】：How to use Marker Clusterer Plus on a google map with retina images如何在带有视网膜图像的谷歌地图上使用 Marker Clusterer Plus
【发布时间】：2014-01-10 15:15:00
【问题描述】：

我正在使用Marker Clusterer Plus 对谷歌地图上的标记进行分组，但 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 也无济于事。

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

【问题讨论】：

标签： google-maps retina-display markerclusterer

【解决方案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/

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

【讨论】：

它有效，感谢您的解决方案！当网站允许时，我会奖励赏金。
这适用于集群标记。单个标记仍以所需比例的 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 }, scaledSize: {'width':320,'height':32}, //图像是 640x64 origin: {'x':0, 'y':0} // 这是从左边开始的第一个图标 }

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：