3

谁能解释为什么渐变不适用于下面的地图？

<!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>
4

3 回答 3

2

我找不到动态应用渐变的语法（您的示例来自哪里？）。有Fusion Tables 返回的样式的描述，但返回的样式的语法似乎不起作用。所以我的猜测是，它（还没有？）可能做到。

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

使用 Fusion Tables Web UI 定义地图样式

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

将另一个地图添加到 Fusion Table

如果您在 Web UI 中指定了所有您需要的样式，您可以像这样在 FusionTablesLayer 中开始使用它们（我复制了您的表格以进行测试）：

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

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

这是 jsFiddle 上的示例，可以试用：http: //jsfiddle.net/odi86/gPjE3/

只需将styleId: 2(gradient on column MP) 更改为styleId: 3(gradient on column M) 看看会发生什么。

我希望这有帮助。

于 2012-08-09T14:16:50.603 回答
1

只有一小部分支持的样式映射通过 Maps API 进行动态设置。请参阅FusionTablesPolygonOptions 的地图 API 文档。

要实现您指定的样式：

  • 在 Fusion Tables 界面的地图可视化中设置您想要的样式
  • styleId从 Fusion Tables 中检索存储的数据。使用API Explorer检索所有存储的样式。
  • 通过 Maps API 设置所需的样式，方法是参考styleId

示例 API 使用

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "MP",
    from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
    where: ""
  },
  styleId: 3
});
于 2012-08-09T14:40:14.487 回答
0

假设您没有制作热图（您应该在其中使用 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
          }     
        }],
    });

    }
于 2012-11-25T21:53:34.777 回答