Question

我有一个融合表，其中包含代表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);   

}

Answer 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>

enter image description here

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

1 个答案: