嵌入我的博客时缺少Fusiontables基本地图 [英] Fusiontables base map missing when embedded on my blog
问题描述
我已经将FusionTableslayer向导生成的HTML代码嵌入到我的Google博客中，并且 发现只有底图图层的点要素全部消失了. 当我放大和缩小时，该层会短暂出现，但随后又消失了.
I've embedded the HTML code generated from fusiontableslayer wizard into my Google blog and found that I got only point features with the base map layer all disappeard. When I zoom in and out, the layer briefly appears but then again goes away.
链接:
http://hkhahm61.blogspot.kr/2014/08/blog- post_21.html
我是javascript的新手，所以不知道如何解决此问题.
I am a complete novice on javascript, so have no idea as to how to fix the problem.
是否有可以解决此问题的方法? 预先谢谢你.
Is there anay way I can fix this? Thank you in advance.
fusiontables HTML代码
The fusiontables HTML code
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(36.53506109154479, 128.38037449395748),
zoom: 7
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: -99 }
]
},
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.province',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col3",
from: "1aj360PsGiV0GOlmFI0-BaYUnTb2UWiNRC4KmBpyP"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
推荐答案
问题是此CSS:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
...这也会影响用于地图的图像(尤其是背景颜色)
...which affects also the the images used for the map(especially the background-color)
添加此CSS以覆盖它:
Add this CSS to override it:
#map-canvas img{
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
这篇关于嵌入我的博客时缺少Fusiontables基本地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
