Question

任何人都可以告诉我为什么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&z=8&l=col7&y=2&tmplt=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标签添加高度和宽度，但这似乎仍无效。

Answer 1

删除visualRefresh，导致错误地计算infoWindow大小。

google.maps.visualRefresh = true;

Answer 2

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

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

InfoWindow内容溢出使用动态模板？

2 个答案: