在 InfoWindow.content 中插入样式化的 HTML 表格？

Question

问候溢出者，

我正在使用 Google Maps API 构建一些工具
我想插入一些样式化的 HTML 表格而不是纯文本
不过，我没有成功。那么，有什么想法吗？谢谢！

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    table.colorful {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table.colorful th {
        background: #b5cfd2 url('blueCell.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table.colorful td {
        background: #dcddc0 url('greenCell.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    #mapCanvas { height: 100% }
</style>

这里：

var info = new google.maps.InfoWindow({
                position: dcs[i].coord,
                content: ""
            });

            info.content = "<table class=\"table.colorful\"><tr><th>Server</th><th>Site</th><th>IP</th><th>Services</th></tr>"

            for(var j in dcs[i].servers) {
                info.content += "<tr><td><b>" + dcs[i].servers[j].name + "</b></td><td>" + dcs[i].servers[j].site + "</td><td>" + dcs[i].servers[j].ip + "</td><td>" + dcs[i].servers[j].services + "</td></tr>";
            }

            info.content += "</table>";

Answer 1

你是如此接近，你需要使用 info.setContent() 代替。

info.setContent(element);