即使遵循了Fusion Tables示例代码，我的Fusion Tables也无法按照我想要的方式进行样式设置。 我究竟做错了什么？
[英]My Fusion Tables won't style the way I want them to, even though I followed the Fusion Tables sample code. What am I doing wrong?
问题描述
I'm trying to control what colors my map is, but it doesn't seem to be working. 
我正在尝试控制地图的颜色，但是似乎不起作用。
I followed Google's sample code , but to no avail. 我遵循了Google的示例代码 ，但无济于事。 My code is below. 我的代码如下。 The attempt to style the map starts at line 132. The comments are just helpful hints for me, since I'm just getting my feet wet in JavaScript and Fusion Tables API. 尝试为地图添加样式的尝试从第132行开始。注释对我来说只是有用的提示，因为我刚开始使用JavaScript和Fusion Tables API。
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:600px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer;
var cz = {
center: new google.maps.LatLng(40, -95),
zoom: 4
};
var locationColumn = 'geometry';
var tableRegion = 4437529;
var mapStyle = [
{
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.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 map_options = {
center: cz["center"], //Accesses the 'center' property of the 'cz' object
zoom: cz["zoom"], //Accesses the 'zoom' property of the 'cz' object
mapTypeId: google.maps.MapTypeId.ROADMAP, //Type of map.
zoomControlOptions: { //control options for the 'zoom' action of Google Maps
style: google.maps.ZoomControlStyle.SMALL, //Makes the zoom function on the upper-left-side of Google Maps small -- instead of a scale-like thing, it's just a plus and minus
position: google.maps.ControlPosition.LEFT_CENTER //Puts Zoom function center-left
},
streetViewControl: false, //Turns off Street View option
panControl: false, //turns off the circular pan button in nupper-left
mapTypeControl: false //Turns off 'MAP/SATELLITE' option in upper-right
};
var locationQuery = {
select: locationColumn,
from: tableRegion
};
function initialize() {
//new Google Map with the 'map_options'
map = new google.maps.Map(document.getElementById('map-canvas'), map_options);
//Styles the map so it removes roads, saturates things, etc. See 'mapStyle'
var style = mapStyle;
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
//Makes the Fusion Tables layer, querying the polygon location info
layer = new google.maps.FusionTablesLayer({
query: locationQuery,
//Here's where I try setting the colors and conditions for my map. Doesn't work.
styles: [{
polygonOptions: {
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
},{
where: "price > 200",
polygonOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.5
}
}]
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
2 个解决方案
解决方案1
0 2012-06-30 10:54:26
You haven't stated what your exact problem is except it ain't working. 您没有说明您的确切问题是什么，除了它没有用。 Not very helpful. 不是很有帮助。 So I'm guessing. 所以我猜。 Your map worked fine for me. 您的地图对我来说很好。 No problems. 没问题。 Try setting fillOpacity: 1 in the code below to see that it's working fine. 尝试在下面的代码中设置fillOpacity：1，以确保其工作正常。 By using .5 you are allowing the base map colors to blend with the FT layer colors. 通过使用.5，您可以将基础地图颜色与FT图层颜色混合。
styles: [{
polygonOptions: {
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
},{
where: "price > 200",
polygonOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.5
}
}]
解决方案2
0 已采纳 2012-06-30 18:59:44
There may have been an issue with FusionTables. FusionTables可能存在问题。 It didn't work for me either when I tried running it locally (I got the tiles with the dreaded "Data May Be Still Loading, Drag or refresh the page to find out"), when I finally got around to uploading a copy , it worked, but then it worked locally as well. 当我尝试在本地运行副本时 ，它对我也不起作用（我得到了令人恐惧的“数据可能仍在加载，拖动或刷新页面以查找结果”的图块），它起作用了，但是后来在本地也起作用了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.