0

130 の自治体を表す 130 のポリゴンの kml 定義を保持するフュージョン テーブルがあります。ポリゴンの塗りつぶしの色を、自治体名が一致する配列に格納されている 16 進値に設定したいと思います。

これが私のコード スタブですが、塗りつぶしの色が機能しません。私がこれをどのように管理できるかについて誰かが洞察を持っていますか?

...
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);   

}
4

1 に答える 1

2

私はあなたのテーブルで簡単な例を作成し、動作します。

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

ここに画像の説明を入力

于 2012-11-26T20:44:14.863 に答える