Question

有没有人对谷歌地图api V3的信息框有一些经验。

属性内容可以在HTML Dom模式下同时使用纯HTML和/或文本。所以我想我正在用这样的简单html构建我自己的infowindow

 function getInnerHtml( name, contract, detailLink)
    {
    var innerHtml = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' + 
                            '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">'+ 
                            '<head>'+  '<title>Framed</title>' + '<style>' +
                            '.infoLayer img {  border: none; }' + 
                            '.infoLayer { height: 83px; overflow: hidden; display: inline-block; min-width: 205px;' +
                            '.infoLayer .content { background: url(img/bg-info-layer.png) repeat-x 0 0; height: 49px; margin: 0; padding: 10px 0; overflow: hidden; float: left;' +
                            '.infoLayer .bgLeft {  background: url(img/bg-info-layer-left.png) no-repeat left top; height: 69px; width: 11px; float: left; }' + 
                            '.infoLayer a, .infoLayer a:active,  .infoLayer a:visited { color: #fff; text-decoration: none;  } }' +
                            '.infoLayer h3 {  margin: 0; padding: 0 10px 0 0; font-size: 16px;  font-weight: bold; }' +
                            '.infoLayer .bgRight { float: left; width: 31px; }' +
                            '.infoLayer .bgRight img { display: block;  overflow: hidden; }' +
                            '.infoLayer .content p {  margin: 0;  padding: 0 10px 0 0;  font-size: 12px;' +
                            '.infoLayer .bottom {  clear: both;  height: 14px;  font-size: 1px;  line-height: 1px;  text-align: center; overflow: hidden; }' +
                            ' </style>' + '</head><body>' + 
                            ' <div class="infoLayer">' + '<div class="wrapper">' + '<div class="bgLeft"></div>' + '<div class="content" style="">'  +  '<h3><a href="#">' + name + '/a></h3>' +
                            ' <p><a href="#">'+ vergoeding(contract) +'</a></p>' + '</div>' + '<div class="bgRight"><a href="#"><img src="../../Content/green_arrow.png" alt="pijl" width="31" height="69" /></a></div>' +
                            '</div>' + ' <div class="bottom"><img src="img/arrow-info-layer-bottom.png" alt="" width="29" height="14"></div>' + ' </div>' + '</body>' + '</html>';
    return innerHtml;

}



   function boxText(name, contract, vestigingID)
    {
        var detailLink =  getBaseUrl() + "/Details/" + vestigingID;
        var boxText = document.createElement("html");
           boxText.innerHTML = getInnerHtml(name, contact, detailLink);

        return boxText;
    }

 function infoboxOptions(boxText)
    {
     var Options = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false,
            alignBottom: false            
        };
        return Options;
    }

我将获得一个定制的信息窗口。然而，这失败了，我得到了一个错误的东西。我在这里错过了一些东西。另外我喜欢我的信息框（窗口）在顶部，但我必须在这里忽略任何想法？

我真的可以使用一些帮助。

Answer 1

事实证明，我的造型确实在做一些时髦的事情。所以我决定只使用html标签中的所有属性。

使用getInnerHtml自定义信息框

1 个答案: