融合表格地图-如何在Google地图的下方显示信息窗口？

Question

I have made a map using multiple layers of fusion tables, some of it with the help last year of members on this forum (thank you!) 我已经使用多层融合表制作了地图，其中一些是在该论坛成员去年的帮助下完成的（谢谢！）

Now I am redesigning it with an overhang above the top of the map, but the result is that the infowindows appear with their tops hidden underneath the overhang. 现在，我正在重新设计它，使其在地图顶部上方具有突出部分，但是结果是，信息窗口的顶部隐藏在突出部分下方。

What I want to do is push the infowindows down below the overhang. 我想做的是将信息窗口向下悬垂下方。 Here are a few things I've tried, that didn't work: 这是我尝试过的一些无效的方法：

** z-index in the css ** a border-top or margin-top in the css for the .googft-info-window ** and this line in the JS: ** CSS中的z-index ** .googft-info-window窗口中CSS的border-top或margin-top **以及JS中的这一行：

                  pixelOffset: e.pixelOffset (100,100)

which only results in the absence of the infowindow when a marker/polygon is clicked. 单击标记/多边形时，只会导致没有信息窗口。

I think the solution is probably in the pixelOffset, but I am no programmer and can't figure out how to write the code. 我认为解决方案可能在pixelOffset中，但是我不是程序员，无法弄清楚如何编写代码。

Here is a very stripped-down version of my project (just two of the eight layers) which I think illustrates the problem: 这是我的项目的精简版本（仅八层中的两层），我认为可以说明问题：

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<html>
  <head>
    <title>layer test parklotproject</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(43.651541,-79.371006),
          zoom: 9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow();

        // Initialize the first layer
       var firstLayer = new google.maps.FusionTablesLayer({
          query: {
            select: 'Location',
            from: '1bkYbC7wZRrvWELw96g3mcwa9mGwSI-auSu9wP70'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(firstLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });

        // Initialize the second layer
        var secondLayer = new google.maps.FusionTablesLayer({
          query: {
            select: 'Location',
            from: '1Zw6q0HhqWPtorfs-7FmLzP_mabUz326W_OuCTQE'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(secondLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });
      }

      // Open the info window at the clicked location
      function windowControl(e, infoWindow, map) {
        infoWindow.setOptions({
          content: e.infoWindowHtml,
          position: e.latLng,
          pixelOffset: e.pixelOffset
        });
        infoWindow.open(map);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
BODY { 
margin-top : 0px; 
margin-left : 20px; 
background-color : #ffffff; 
} 
body, td, th { 
letter-spacing : 1px; 
line-height : 140%; 
font-family : Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif; 
font-size : 13px; 
} 
html {
    overflow-y: scroll; 
}
#welcomecontrols {
    position: relative;
    z-index: 20;
    width: 100%;
    opacity: .8;
background-color : #ffffff;     }
#map-canvas{
    top:10px;
    position:absolute;
    clear:none;
    z-index:1;
    padding: 0px;
    margin: 0px;
    height: 600px;
    left: 20px;
    width: 96%;
} 
.googft-info-window{
    background-color:white;
    text-align:left;
    z-index: 1000;   
    height:400px; width:590px; overflow: auto;
}
</style>     
</head>
<body> 
<div  id="welcomecontrols">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="bottom">
<h1><span style="color:#333333; font-size:15px;">Welcome to</span><br>
<span style="letter-spacing:2px; color:#D2691E; font-size:22px;"><b>The Toronto Park Lot Project</b></span></h1>
</td>
<td width="10" align="right" valign="top">&nbsp;</td>
</tr>
<tr>
<td colspan="1" valign="top">
<p><b>an exploration of the earliest days of the TOWN OF YORK, founded 1793 by <nobr>John Graves Simcoe,</nobr> first Lieutenant-Governor of Upper Canada</b><br>
<i>(The Town of York was incorporated 1834 as the City of Toronto.)</i><br>
&nbsp;&nbsp;</p>
</td>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table>
</div>
    <div id="map-canvas"></div>
</body>
</html>

Any suggestions on how to solve this? 关于如何解决这个问题有什么建议吗？ Thank you. 谢谢。 Wendy 温迪

Answer 1

Add a custom control with a height equal to the height of the overhang to the TOP-controls of the map. 将高度等于突出端高度的自定义控件添加到地图的TOP控件。

The API usually will try to place the infoWindow into a position where it will not be covered by a control(when possible) API通常会尝试将infoWindow放置在infoWindow不会覆盖的位置（如果可能）

Demo: http://fiddle.jshell.net/doktormolle/EezcR/show/ 演示： http : //fiddle.jshell.net/doktormolle/EezcR/show/
Source: http://jsfiddle.net/doktormolle/EezcR/ 资料来源： http : //jsfiddle.net/doktormolle/EezcR/

融合表格地图-如何在Google地图的下方显示信息窗口？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-19 02:02:30

融合表格地图-如何在Google地图的下方显示信息窗口？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-19 02:02:30

解决方案1
1 已采纳 2013-06-19 02:02:30