Question

任何人都可以解释为什么渐变不适用于下面的地图吗？

<!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&amp;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>

Answer 1

我找不到动态应用渐变的语法（你从哪里得到你的例子？）。有一个description of the styles that are returned by Fusion Tables，但返回的样式的语法似乎不起作用。所以我的猜测是，它（但是？）不可能做到。

但是，如果对您来说动态并不重要，您可以在Fusion Tables Web UI中定义渐变：

Define a map style with the Fusion Tables web UI

如果要创建多个样式，可以添加多个样式。为此，您必须切换到新外观（请参阅右上角的Web ui中的链接＆＃34;切换到新外观＆＃34;）。然后，您可以使用＆＃34; +＆＃34;添加新地图。按钮：

Add another map to a Fusion Table

如果您在网络用户界面中指定了所需的所有样式，则可以start to use them in FusionTablesLayer这样（我制作了一份表格来测试）：

layer = new google.maps.FusionTablesLayer({
    map: map,
    query: {
        select: "MP",
        from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
        where: ""
    },
    styleId: 2
});

styleId 1是默认值，然后2是您添加的第一个，3是第二个，依此类推。我为复制的表创建了2个样式。

以下是有关jsFiddle的示例：http://jsfiddle.net/odi86/gPjE3/

只需将styleId: 2（列MP上的渐变）更改为styleId: 3（列M上的渐变），然后查看会发生什么。

我希望这会有所帮助。

Answer 2

只能通过Maps API动态设置支持的样式地图的一小部分。请参阅Maps API Documentation for FusionTablesPolygonOptions。

要实现您指定的样式：

在Fusion Tables界面中的Map Visualizatioon上设置所需的样式
从Fusion Tables中检索存储的styleId。使用API Explorer检索所有存储的样式。
通过引用styleId

API使用示例

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "MP",
    from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
    where: ""
  },
  styleId: 3
});

Answer 3

假设你没有制作热图（你应该使用Goog Drive中的默认样式），正确的方法是通过查询手动创建自己的渐变。

初始化内... 创建你的普通融合层

var fusionlayer = new google.maps.FusionTablesLayer({
    query: {
        select: '*',
        from: tableID
    }
});

我更喜欢将样式器放入函数中，因为您可以调用不同的数据列来进行渐变。

function changeMap(tableValue) { 
    var newStyle = [
    {
      where: tableValue + "< 0.01",
      polygonOptions: {
        fillColor: "#CCCCCC",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.01 AND" + tableValue + "< 0.05",
      polygonOptions: {
        fillColor: "#fefb8c",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + " >= 0.05 AND" + tableValue + "< 0.10",
      polygonOptions: {
        fillColor: "#ff9233",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.10",
      polygonOptions: {
        fillColor: "#800000",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }];

    fusionLayer.setOptions({
      'styles': newStyle,
    });
};

根据需要自定义大于或等于查询和颜色。

我还有一个重置功能来“清除”地图。鉴于您只是改变了地图的视觉外观，这一点非常重要。

function defaultMap() { 
    fusionlayer.setOptions({
      'styles': [{ 
          polygonOptions: {
            fillColor: "#cccccc",
            strokeColor: "#dddddd",
            strokeWeight: 0
          }     
        }],
    });

    }

融合表层的梯度

3 个答案:

API使用示例