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&t=8&l=col7&tmpl&y=2

しかし、HTML コードを使用して Web ページを作成しようとすると、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 を追加すると、コンテンツにスクロールバーが表示されます。そうはなりませんか？ダイナミック テンプレート ヘルプの例の 1 つは、フィールドがあるかどうかに基づいて高さを異なる方法で設定しているため、役立つ可能性があります。

于 2013-08-02T17:52:06.807 に答える