0

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

  1. 背景图片不显示（默认为后面的纯色）
  2. 我无法摆脱信息窗口中内容周围的填充
<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=t=1colt=1colt

谢谢...

4

0 回答 0