如何在Google地图上使用Marker Clusterer Plus与Retina图像
-
21-12-2019 - |
题
我正在使用标记群集加上在谷歌地图上进行组标记,但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无关。
有人知道如何正确配置这个吗?
解决方案
这在标记群集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 += "'>";
.
所以它们实际上只禁用Sprite图标的剪裁,但它们实际上并不实际运行所需的视网膜操作。图标的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 += "'>";
.
它似乎工作:
完整修补的库@pastebin
测试示例 - http://jsfiddle.net/rt28t/2/
您可以报告一个错误并将其添加为提议的修补程序: - )
其他提示
我知道这个问题已得到解答,而是解决这个问题(并且可能更容易)的另一种方法是使用SVG标记图标。那样:
- 您的解决方案将支持任何设备像素密度
- 您不需要修补库(包含它可能导致的所有问题)
- 当前的浏览器支持非常好 - 检查 caniuse.com svg-img 用于浏览器统计数据
只需上传尺寸的两倍:
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%;
}
. 不隶属于 StackOverflow