在InfoWindow.content中插入样式HTML表

Inserting Styled HTML Table inside InfoWindow.content?

本文关键字：样式 HTML 插入 InfoWindow content      更新时间：2023-09-26

问候花儿，

我正在使用谷歌地图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>";

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

info.setContent(element);
相关文章：