Как использовать Marker Clusterer Plus на карте Google с Retina Images
-
21-12-2019 - |
Вопрос
Я использую Маркерский кластерПлюс для групповых маркеров на карте 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);
.
Опция ENALLEERETINAICONS, похоже, не работает, изображение показано вдвое больше.
Настройка ширины до 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 += "'>";
.
Итак, они на самом деле отключают только отсечение иконок спрайта, но они на самом деле не запускают необходимое действие сетчатки. 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 .Таким образом:
- .
- Ваше решение будет поддерживать любую плотность пикселей устройства
- Вам не нужно исправлять библиотеку (со всеми проблемами, которые могут вызвать)
- Текущая поддержка браузера довольно хорошая - Check 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%;
}
.