求助:如何让InfoWindow中的标题显示为粗体?
Hey there! Let's get that InfoWindow title bolded properly. The issue you're running into is that Google Maps applies its own default styles to InfoWindow content, which can override the standard <strong> tag styling. Here are a couple of reliable fixes:
Method 1: Add Inline Style to the Strong Element
Force the bold styling directly on your <strong> element using inline CSS—this will take precedence over the map's default styles:
var name = markerElem.getAttribute('name'); var infowincontent = document.createElement('div'); var strong = document.createElement('strong'); strong.textContent = name; // Add inline style to ensure bold text strong.style.fontWeight = 'bold'; infowincontent.appendChild(strong); infowincontent.appendChild(document.createElement('br')); // Make sure to pass the content to your InfoWindow const infoWindow = new google.maps.InfoWindow({ content: infowincontent });
Method 2: Use InnerHTML for Concise Content Building
You can also build your content string directly with HTML using innerHTML, which makes the bold styling explicit and harder for map styles to override:
var name = markerElem.getAttribute('name'); var infowincontent = document.createElement('div'); // Use template literal to insert the bolded name infowincontent.innerHTML = `<strong>${name}</strong><br>`; const infoWindow = new google.maps.InfoWindow({ content: infowincontent });
Why This Works
Google Maps sanitizes and applies its own CSS to InfoWindow content, which can strip or override default HTML element styles. By either using inline styles or explicitly defining the bold formatting in an HTML string, you ensure your desired styling isn't overwritten.
内容的提问来源于stack exchange,提问作者gwapo

