以编程方式更改融合表多边形颜色答案

【问题标题】：change fusion table polygon color programmatically以编程方式更改融合表多边形颜色
【发布时间】：2012-11-26 17:13:11
【问题描述】：

我有一个融合表，其中包含代表 130 个城市的 130 个多边形的 kml 定义。我想将多边形填充颜色设置为存储在数组中的十六进制值，其中城市名称匹配。

这是我的代码存根，但填充颜色不起作用。有没有人对我如何管理这个有任何见解？

...
getFTData(table_id, 'Name', example_dataHandler);
...

function getFTData(table_id, col_list, successFunction) {

    var query = "SELECT " + col_list + " FROM " + table_id;

    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    $.ajax({
        type: "GET",
        url:  queryurl,
        dataType: "jsonp",  // return CSV FustionTable response as JSON
        success: successFunction,
        error: function () {alert("AJAX ERROR for " + queryurl ); }
    });
}
function example_dataHandler(d) {
    // get the actual data out of the JSON object
    var rows = d.table.rows;
    var row_count = 0;
    layer = new google.maps.FusionTablesLayer({
        query: 
        {
            select: 'geometry',
            from: '11KMJrKcQ4f729YGbcUoe4lvp66JKZhB0pJ-3w9k'
        },
        options:
        {
        suppressInfoWindows: true
        }
    });

    for (var i = 0; i < rows.length; i++) {

        // Per the expected columns
        for(j=0; j < rows[i].length; j++)
        {
            styles: [{
              where: "'Name' = '" + rows[i][j] + "'",
              polygonOptions: {
                fillColor: countyColors[row_count],
                strokeColor: "#FFFFFF",
                strokeWeight: 3
              }
            }]

        }
        row_count++;
    }

    layer.setMap(map);   

}

【问题讨论】：

这是一次性操作吗？您可以从 FusionTable 中的列配置多边形的颜色。如果你的颜色少于五种，可以dynamically in your javascript。您的代码似乎加载了两次多边形，一次在 FusionTablesLayer 中，一次作为本机 Google Maps API v3 多边形（在查询的回调中）。
我不希望从 Fusion Table 列中设置颜色，但我可能不得不这样做。我收到一个 json 文件，其中包含每个自治市应具有的颜色。我还有一个 kml 文件，可以让我轻松地将其上传为融合表并将其放置在谷歌地图上。我只想正确地构建我的循环，以便将 kml 文件放在地图上并为城市着色。但是我这里没有做对。
您的表是公开的吗？你有定义颜色的 JSON 样本吗？考虑到这些细节，实施起来应该不会太难。
表是公开的（表ID在上面的代码中可以找到）。 json 文件位于newsinteractive.post-gazette.com/e2012laura/json/pcounty.json。

标签： jquery kml polygon google-fusion-tables

【解决方案1】：

我用你的表创建了一个简单的例子，并且工作正常。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Fusion Tables</title>
    <style type="text/css">
      html, body,#map_canvas {
        margin: 0;
        padding: 0;
        width : 100%;
        height: 100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map, layer;
      function initialize() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
          center : new google.maps.LatLng(40.42127, -80.098181),
          zoom : 10,
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          noClear : true
        });

        var selectEle = document.getElementById("colorSelector");
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectEle);
        google.maps.event.addDomListener(selectEle, "change", onColorSelect_changed);

        layer = new google.maps.FusionTablesLayer({
          map : map,
          query : {
            select : "geometry",
            from : "11KMJrKcQ4f729YGbcUoe4lvp66JKZhB0pJ-3w9k"
          }
        });
      }

      function onColorSelect_changed() {
        var options = {
          styles : []
        };
        var styles = [];
        var selectEle = this;

        if (selectEle.selectedIndex == 0) {
          return;
        }

        options.styles.push({
            where: "'Name' = 'Pittsburgh'",
            polygonOptions: {
              fillColor: selectEle.value,
              strokeColor: "#FFFFFF",
              strokeWeight: 3
            }
          });
        layer.setOptions(options);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>

    <div id="map_canvas">
      <select id="colorSelector">
        <option >--Select color--</option>
        <option value="#ffff00">#FFFF00</option>
        <option value="#ff00ff">#FF00FF</option>
        <option value="#f0f0f0">#F0F0F0</option>
      </select>

    </div>
  </body>
</html>

【讨论】：

我还没有完成这项工作。而且我仍然无法从我的 json 文件中查找和提取填充颜色。
我得到了在一个城市工作的代码。现在我只需要弄清楚如何从 json 文件中查找并提取正确的颜色。
您的代码让我走上了正轨！谢谢！我正在做的是构建一个循环并将选项推送到一个数组中： for (var i=0;i
样式数组的问题是样式限制为 5 个。如果您只有 2 种颜色（现在的样子），那可能没问题。