谷歌地图信息窗口的HTML头部内容不起作用

前端开发 2026-07-11

headerContent可选，类型：string|Element|Text。用于在InfoWindow的头部行显示的内容。这可以是一个HTML元素，或者一段纯文本。InfoWindow的尺寸将根据内容来确定。若要为头部内容设置一个明确的尺寸，请将headerContent设置为具有该尺寸的HTML元素。

尽管如此，我尝试了好几次，但始终没能在标准的Google地图InfoWindow的头部显示HTML文本。

每次，HTML的格式都被当作纯文本显示。

我也尝试了Google官方文档提供的示例，你可以在这个页面找到： https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/infowindow-simple/jsfiddle

如果你尝试在JavaScript部分的第37行和第38行之间添加这段简单的代码片段：

headerContent: '<div style="color:#ff0000">Hello World!</div>'

如下图所示的图片： Jsfiddle修改后的代码，你仍然会得到这个：代码修改的结果，如果点击运行按钮。

有人能帮我解决这个问题吗？

先行致谢。

Fabrizio。

解决方案

这可以是一个HTML元素，，也可以是一段纯文本。

请仔细阅读：它说的是HTML元素（element），而不是“包含HTML的字符串”。

你需要的是像这样：

const headerContent = document.createElement('div');
headerContent.innerHTML = 'Hello World!';
headerContent.style.color = '#ff0000';

const infowindow = new google.maps.InfoWindow({
    content: contentString,
    headerContent: headerContent,
    ariaLabel: "Uluru"
});

https://jsfiddle.net/o7m4urfw/

JavaScript