Question

我想显示覆盖有两个Fusion Tables图层的Google地图。如果我只是将其复制到文本编辑器中，将文件保存为map.html，并在浏览器中打开它，则下面的代码可以正常工作。但是，当我把它放在我的WordPress主题网站的帖子中时，底层地图被Fusion Tables图层隐藏。这些层并非完全不透明：我可以同时看到它们。我只是看不到底层地图。

每当我缩放或平移地图时，基础地图会在Fusion Tables图层绘制之前短暂出现。我怀疑有一个样式设置有问题。你知道如何正确显示地图吗？

我正在使用WordPress版本3.0.4和Woothemes的Gazette主题;该网站是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>

谢谢！

Answer 1

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

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

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

.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>

FusionTablesLayer隐藏了WordPress页面上的底层地图

1 个答案: