Question

我正在为Google Fusion Tables地图创建自定义信息窗口布局。我的一个列指定（部分）图像名称，然后将其用作背景图像。我希望这个背景图像与信息窗口的边缘齐平。我在下面编写的代码在本机html中工作，但不在信息窗口中，因为：

背景图片未显示（默认为背后的平面颜色）
我无法摆脱信息窗口中我内容的填充

<div class='googft-info-window' style='font-family: sans-serif; width:495px; padding:0px; margin:0px;'>
<div style="width:495px; height:36px; background:url(http://www.exampleurl.com/images/{header_hex}.gif) #{header_hex};">
<a href="{url}" style="font-weight:bold;font-size:14pt;color:#0066ff; text-decoration:none;" target="_blank" >{item}</a>
</div>
</div>

感激不尽的任何想法......谢谢。

编辑添加：

我在将信息嵌入信息窗口时遇到了问题。只有一个视频 - 位于下方地图链接的东边黄色标记上。（在此标记的信息窗口中显示了一个损坏的图像，因为图像尚未上传，因此视频应位于该视频窗口的上方。我正在使用的视频嵌入代码是：

<iframe width="300" height="165" src="http://www.youtube.com/embed/-yYLLb53V8E?rel=0" frameborder="0" allowfullscreen></iframe>

我正在使用Fusion Tables（实验性），我的信息窗口布局是：

<div class='googft-info-window' style='font-family:sans-serif; color:#666; width:495px; padding:0px; margin:0px;'>

<div style="width:495px; background:url(http://www.responsibletravel.com/imagesclient/{header_hex}.gif) #{header_hex};"><div style="padding:8px;">
<a href="{url}" style="font-weight:bold;font-size:14pt;color:#0066ff; text-decoration:none;" target="_blank" >{item}</a>
</div></div>

<div style="float:left; width:330px; padding-top:10px;">
<div style="width:330px; padding-bottom:15px;">{description}</div>
<div style="width:330px; padding-bottom:15px;"><a href="{url}" style="color:#0066ff; text-decoration:none;" target="_blank" >Read more about this {type}</a></div>
<div style="width:330px;">{enquiry_url}</div>
<div style="width:330px;"><a href="{review_url}" target="_blank" >{stars}</a> <a href="{review_url}" style="color:#0066ff; text-decoration:none;" target="_blank" >{reviews}</a></div>
<div style="float:left; width:110px; padding-top:10px">
<span style="font-weight:bold; font-size:11px">Share this:</span><br>
<a href="http://www.facebook.com/sharer.php?u={url}&t={item}" style="color:#0066ff; text-decoration:none;" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/facebook-button-26.gif" style="border:0; padding:5px 5px 5px 0px;"></a>
<a href="http://twitter.com/home?status={item}+{url}+%28via+%40r_travel%29" style="color:#0066ff; text-decoration:none;" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/twitter-button-26.gif" style="border:0; padding:5px 5px 5px 0px;"></a>
</div>
<div style="float:left; width:100px; padding-top:26px">{xsell_icon_1}</div>
</div>

<div style="float:right; width:160px; padding-top:10px;">
<div style="float:right; padding-top:10px"><a href="{url}" target="_blank" ><img src='{image_S}' width='148' style='float:right; vertical-align:top; border:0'alt="{item}"/></a></div>
<div style="float:right; padding-top:5px">{video_embed}</div>
<div style="float:right; padding-top:10px"><a href="http://www.visitbrighton.com" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/visit-brighton-logo-148x58.gif" style="border:0; width:148px;"></a></div>
</div>

</div>

地图在这里（部分信息仍在填充，但你明白了）：

https://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col0+from+1r9PzOl93v_3amDCSXBHJcWhMCK6X9BufzF4TJhM&h=false&lat=50.82791056751128&lng=-0.14479637145996094&z=15&t=1&l=col0&y=1&tmplt=1

谢谢...

将背景图片添加到Google Fusion Tables地图信息窗口？

0 个答案: