用getInnerHtml自定義信息框

有沒有人有谷歌地圖API的信息框的一些經驗。用getInnerHtml自定義信息框

屬性的內容可以在HTML DOM模式下兩個普通的HTML和或文本。所以我想我正在建立自己的信息窗口的純HTML這樣

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; 
    }

，我會得到一個信息窗口定製。但是，這失敗了，我得到一個infowindow與錯誤的東西。我在這裏錯過了一些東西。另外我喜歡我的信息框（窗口）在上面，但我必須在這裏忽略任何想法？

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

來源

2012-04-01 Shinji

您正在創建'''（'document.createElement（'html'）'）節點並在其中添加其他''（在'getInnerHtml'函數內）！ – Engineer 2012-04-01 12:39:34

所以我應該只留下一個（我的html標籤），嗯好吧，我會嘗試，謝謝你的回答 – Shinji 2012-04-01 12:53:56

我想，你試圖把所有的信息內容包裹在'iframe'中。 – Engineer 2012-04-01 12:56:44

原來，我的造型確實做了一些時髦的事情。所以我決定只使用html標籤中的所有屬性。

來源

2012-04-01 21:46:01 Shinji

用getInnerHtml自定義信息框

回答

相關問題