![](/img/trans.png)
[英]I can't access a css style with my javascript code. what is wrong with my code?
[英]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?
我正在尝试控制地图的颜色,但是似乎不起作用。
我遵循了Google的示例代码 ,但无济于事。 我的代码如下。 尝试为地图添加样式的尝试从第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>
您没有说明您的确切问题是什么,除了它没有用。 不是很有帮助。 所以我猜。 您的地图对我来说很好。 没问题。 尝试在下面的代码中设置fillOpacity:1,以确保其工作正常。 通过使用.5,您可以将基础地图颜色与FT图层颜色混合。
styles: [{
polygonOptions: {
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
},{
where: "price > 200",
polygonOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.5
}
}]
FusionTables可能存在问题。 当我尝试在本地运行副本时 ,它对我也不起作用(我得到了令人恐惧的“数据可能仍在加载,拖动或刷新页面以查找结果”的图块),它起作用了,但是后来在本地也起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.