Хорошо, вот одно решение, которое я нашел, которое довольно запутано.
Я поместил полный текст метки в div, используя атрибут метки fontFamily. Затем я использую querySelectorAll, чтобы сопоставить получившиеся атрибуты стиля, чтобы извлечь ссылки и переписать теги после загрузки карты:
var label = "A123";
var marker = new google.maps.Marker({
position: latLon,
label: {
text: label,
// Add in the custom label here
fontFamily: 'Roboto, Arial, sans-serif, custom-label-' + label
},
map: map,
icon: {
path: 'custom icon path',
fillColor: '#000000',
labelOrigin: new google.maps.Point(26.5, 20),
anchor: new google.maps.Point(26.5, 43),
scale: 1
}
});
google.maps.event.addListener(map, 'idle', function() {
var labels = document.querySelectorAll("[style*='custom-label']")
for (var i = 0; i < labels.length; i++) {
// Retrieve the custom labels and rewrite the tag content
var matches = labels[i].getAttribute('style').match(/custom-label-(A\d\d\d)/);
labels[i].innerHTML = matches[1];
}
});
Это кажется довольно хрупким. Есть ли подходы, которые менее ужасны?
Он делает это, потому что это его настройки по умолчанию. В старых браузерах иногда наличие конечного тега блока или встроенного элемента на новой строке после дочернего элемента (фактически оставляя пробелы, такие как неразрывный пробел или пустой текстовый узел) влияет на то, как отображается страница. У меня раньше были проблемы с этим. Например, следующее может иметь проблемы с правильным отображением, если ваши привязки имеют границы или отступы:
<a>
<img src="..." />
</a>
Иногда может быть дополнительный интервал внизу ссылки. Изменение его на следующее удаляет дополнительный интервал:
<a><img src="..." /></a>
По сути, глупое форматирование решает некоторые проблемы отрисовки в браузерах с дрянной поддержкой CSS, таких как IE6. Если у вас IE6, посмотрите этот JSFiddle , который я создал, чтобы проиллюстрировать проблему. Там'