问题描述
我想展示一个叠加了两个Fusion Tables图层的Google地图。下面的代码完美地工作，如果我将它复制到文本编辑器中，将文件保存为 map.html ，然后在浏览器中打开它。但是当我把它放在WordPress主题站点的帖子中时，底层地图被Fusion Tables图层隐藏起来。这些图层并不完全不透明：我可以同时看到它们两个。我只是看不到底层的地图。
每当我缩放或平移地图时，底层地图都会在Fusion Tables图层绘制之前短暂出现。我怀疑是有错误的风格设置。您知道如何让地图正确显示吗？
我使用woothemes的Gazette主题使用WordPress 3.0.4版本;该网站。
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< /脚本>
< div id =gmapstyle =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>
谢谢！
Wordpress将您帖子的内容封装在< div class =entry> 块中，您的主题用于提供正确的样式。由于准备显示Google地图的JavaScript会返回图像，因此该公报样式表的相关部分为：
.entry img {
padding：4px;
border：1px solid #dddddd;
背景颜色：#FFFFFF;
$ b特别是， background-color 设置会导致覆盖的Fusion Tables图层以不透明背景绘制，然后隐藏底层图。您需要在您的样式表中定义一个新类（让我们称之为地图），以透明背景绘制图像：
.map img {
background-color：transparent;
}
然后将您的javascript包装在< div class =map> block，如下所示：
< div class =map >
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< div id =gmapstyle =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>
I'd like to display a Google Map overlaid with two Fusion Tables layers. The code below works perfectly if I just copy it into a text editor, save the file as map.html, and open it in my browser. But when I put it in a post on my WordPress-themed site, the underlying map is hidden by the Fusion Tables layers. Those layers aren't totally opaque: I can see both of them at the same time. I just cannot see the underlying map.
Whenever I zoom or pan the map, the underlying map appears briefly before the Fusion Tables layers are drawn over it. I suspect that there is a style setting at fault. Do you know how to get the map to display properly?
I'm using WordPress version 3.0.4 with the Gazette theme by woothemes; the site is 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>
Thanks!
解决方案 Wordpress wraps the content of your post in a <div class="entry"> block, which your theme uses to provide the proper styling. Since the javascript that prepares the Google map for display returns an image, the relevant part of the Gazette style sheet is:
.entry img {
padding: 4px;
border: 1px solid #dddddd;
background-color: #FFFFFF;
}
Specifically, the background-color setting causes the overlaid Fusion Tables layers to be drawn with an opaque background, which then hides the underlying map. You need to define a new class in your style sheet (let's call it "map") that draws images with a transparent background:
.map img {
background-color: transparent;
}
And then wrap your javascript in a <div class="map"> block, like so:
<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页面上的底层地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！