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

【问题标题】：FusionTablesLayer hides the underlying map on a WordPress pageFusionTablesLayer 隐藏 WordPress 页面上的底层地图
【发布时间】：2012-01-20 22:51:49
【问题描述】：

我想显示一个覆盖有两个 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>

谢谢！

【问题讨论】：

我们已经解决了这个问题。与主题存在风格冲突。 “入口”类图像被赋予白色背景。添加了指定透明背景的新 .map img 子类。

标签： wordpress google-maps google-fusion-tables

【解决方案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>

【讨论】：