0

谁能告诉我为什么我的 InfoWindows 的内容会溢出？当我在 Fusion Table UI 中查看 InfoWindows 时，它们都会弹出并正确调整大小：

https://www.google.com/fusiontables/embedviz?q=select+col7+from+15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU&viz=MAP&h=false&lat=34.199813229302734&lng=-111.2955847411987&t=1&zmplt=8&l&=col7&y=2

但是当我尝试使用 html 代码创建网页时，一些（不是全部）InfoWindow 内容会溢出：

<!DOCTYPE html>
<html>
<head>
<title>CaveCreek - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function initialize() {
    google.maps.visualRefresh = true;
    var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
      center: new google.maps.LatLng(34.199813229302734, -111.2955847411987),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
        select: "col7",
        from: "15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU",
        where: ""
      },
      options: {
        styleId: 2,
        templateId: 2
      }
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
  <div id="googft-mapCanvas"></div>
</body>
</html>

我的动态模板 InfoWindow 代码如下所示：

{template .contents}
<div>
  <div style="align: center">
    <b>{$data.value.Stream}</b>
  </div>
{if $data.value.y2012}
<a href="{$data.value.y2012}" target="_blank">2012</a>-{/if}
{if $data.value.y2012a}
<a href="{$data.value.y2012a}" target="_blank">2012a</a>-{/if}
...
</div>
{/template}

我试图在模板中为 InfoWindow 的 div 标签添加高度和宽度，但这似乎仍然不起作用。

4

2 回答 2

0

删除导致 infoWindow 大小计算不正确的 visualRefresh。

google.maps.visualRefresh = true;
于 2013-08-02T12:40:09.180 回答
0

请注意，Google 地图的视觉刷新将很快成为默认设置，因此删除它不是一个长期的解决方案。

如果设置 div 的高度并添加 overflow-y: scroll 你应该在你的内容上得到一个滚动条；这不会发生吗？动态模板帮助中的示例之一是根据字段是否存在以不同方式设置高度，这可能会有所帮助。

于 2013-08-02T17:52:06.807 回答