Javascript 使用getInnerHtml自定义信息框
有没有人对谷歌地图api V3的infobox有一些经验 属性内容可以在html Dom模式下采用纯html和或文本。 所以我想我正在用纯html构建自己的信息窗口，就像这样Javascript 使用getInnerHtml自定义信息框,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,有没有人对谷歌地图api V3的infobox有一些经验 属性内容可以在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/
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;
}
我真的需要一些帮助。事实证明，我的样式设计确实有些古怪。所以我决定只使用html标记中的所有属性。您正在创建“
document.createElement（'html'）getInnerHtmliframe