1

我想显示一个覆盖有两个 Fusion Tables 图层的 Google 地图。如果我将下面的代码复制到文本编辑器中，将文件另存为map.html，然后在浏览器中打开它，那么下面的代码就可以完美运行。但是当我将它放在我的 WordPress 主题网站上的帖子中时，底层地图被 Fusion Tables 图层隐藏了。这些层并非完全不透明：我可以同时看到它们。我只是看不到底层地图。

每当我缩放或平移地图时，底层地图会在 Fusion Tables 图层被绘制在其上之前短暂出现。我怀疑风格设置有问题。你知道如何让地图正确显示吗？

我正在使用带有 woothemes 的 Gazette 主题的 WordPress 3.0.4 版；该网站是http://www.wisconsinwatch.org。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
        var fracmap = new google.maps.Map(document.getElementById('gmap'), {
            center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
        });
        var layer0 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
</div>

谢谢！

4

1 回答 1

1

Wordpress 将您帖子的内容包装在一个<div class="entry">块中，您的主题使用它来提供正确的样式。由于准备 Google 地图以供显示的 javascript 返回图像，因此 Gazette 样式表的相关部分是：

.entry img {
    padding: 4px;
    border: 1px solid #dddddd;
    background-color: #FFFFFF;
    }

具体来说，该background-color设置会导致使用不透明背景绘制覆盖的 Fusion Tables 图层，然后隐藏底层地图。您需要在样式表中定义一个新类（我们称之为“地图”），以绘制具有透明背景的图像：

.map img {
    background-color: transparent;
    }

然后将您的 javascript 包装在一个<div class="map">块中，如下所示：

<div class="map">               
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div id="gmap" style="width:590px; padding-top:40px;height: 550px;">
    <script type="text/javascript">
    var fracmap = new google.maps.Map(document.getElementById('gmap'), 
        center: new google.maps.LatLng(44.797709533120106, -90.43712582444374),
            zoom: 7,
            mapTypeId: 'hybrid'
            });
            var layer0 = new google.maps.FusionTablesLayer({
                query: {
                select: 'geometry',
                from: 2695847
            },
        });
        layer0.setMap(fracmap);
        var layer1 = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: 2695779
            },
        });
        layer1.setMap(fracmap);
    </script>
    </div>
</div>
于 2012-01-21T18:37:29.013 回答