我正在使用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也无济于事.
有人知道如何正确配置吗?
这显然是Marker Clusterer Plus中的错误.代码中他们实际使用此选项的唯一位置是:
img = "<img src='" + this.url_ + "' + 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_ + "' + 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 += "'>";
您可以报告错误并将其添加为建议的补丁:-)