渐变为Fusion表层 [英] Gradient for Fusion Table Layer
问题描述
< p>< ;！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd\"><html><head>< title> Riks.txt - Google Fusion Tables< / title>
< style type =text / css>
html，body，#map_canvas {
margin：0;
padding：0;
身高：100％;
}
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.7&sensor=false>
< / script>
< script type =text / javascript>
函数initialize（）
{
map = new google.maps.Map
（document.getElementById（'map_canvas'），
{
center： new google.maps.LatLng（59.53726545292721,18.12209266712103），
zoom：11，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
layer = new google.maps.FusionTablesLayer（{
map：map，
heatmap：{enabled：false}，
query：{
select ：MP，
来自：1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4，
其中：
}，
款式：[
{
styleId：2，
polygonOptions：{
fillOpacity：1，
fillColorStyler：{
表达式：MP，
最小值：0，
最大值：100，
gradient：['＃0000ff'，'＃00ffff'，'＃00ff00'，'＃ffff00'，'＃ff0000']
}，
strokeWeight：1，
strokeOpacity：0.3，
strokeColor：'＃000000'
}
}
]
}）;
layer.setOptions（{
styleId：2，
templateId：0
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>< / head>
< body>< div id =map_canvas>< / div>< / body>< / html>
我无法找到动态应用渐变（从哪里有你的例子？）。有关（我制作了一份表格来测试它）：
layer = new google.maps.FusionTablesLayer（{
map：map，
查询：{
select：MP，
来自：1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E，
其中：
}，
styleId：2
}）;
styleId 1是默认值，然后是2是你添加的第一个，第二个，等等。我为我的复制表创建了2种样式。
以下是jsFiddle尝试的示例： 在 MP >到 styleId：3 （列 M ），看看会发生什么。
我希望这有助于。
Can anyone explain why the gradient isn't working for the map below?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Riks.txt - Google Fusion Tables</title>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.7&sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
map = new google.maps.Map
(document.getElementById('map_canvas'),
{
center: new google.maps.LatLng(59.53726545292721,18.12209266712103),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "MP",
from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
where: ""
},
styles: [
{
styleId: 2,
polygonOptions: {
fillOpacity: 1,
fillColorStyler: {
expression: "MP",
min: 0,
max: 100,
gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
},
strokeWeight: 1,
strokeOpacity: 0.3,
strokeColor: '#000000'
}
}
]
});
layer.setOptions({
styleId: 2,
templateId: 0
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script></head>
<body><div id="map_canvas"></div></body></html>
I coulnd't find the syntax to dynamically apply a gradient (from where do you have your example?). There is a description of the styles that are returned by Fusion Tables, but the syntax of the returned style doesn't seem to work. So my guess is, that it's not (yet?) possible to do.
But, if it's not important for you to do this dynamically, you can define the gradient in the Fusion Tables Web UI:
If you want to create several styles, you can add multiple maps. To do so, you have to switch to the switch to the new look (see the link in the web ui in the upper right corner "Switch to new look"). Then you can add a new map using the "+" button:
If you specified all the styles you need in the web UI, you can start to use them in FusionTablesLayer like that (I made a copy of your table to test that):
layer = new google.maps.FusionTablesLayer({
map: map,
query: {
select: "MP",
from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
where: ""
},
styleId: 2
});
styleId 1 is the default, then 2 is the first one you added, 3 the second and so on. I created 2 styles for my copied table.
Here is the example on jsFiddle to try out: http://jsfiddle.net/odi86/gPjE3/
Just change styleId: 2 (gradient on column MP) to styleId: 3 (gradient on column M) and see what happens.
I hope this helps.
这篇关于渐变为Fusion表层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
