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

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

}

来源

2012-11-26 LauraNMS

这是一次性操作？您可以在FusionTable中从列中配置多边形的颜色。如果您的颜色少于5种，则可以[在javascript中动态显示]（https://developers.google.com/maps/documentation/javascript/reference#FusionTablesStyle）。您的代码似乎正在加载多边形两次，一次是在FusionTablesLayer中，另一次是本机Google Maps API v3多边形（在查询回调中）。 – geocodezip

我不想设置Fusion Table列的颜色，但我可能不得不这样做。我收到一个json文件，其中包含每个城市应该具有的颜色。我还有一个kml文件，可以让我轻松地将其作为融合表上载并放置在谷歌地图上。我只是想正确地构建我的循环，以便我将kml文件放在地图上并为城市着色。但我在这里没有做到正确。 – LauraNMS

你的桌子是公开的吗？你有一个定义颜色的JSON样本吗？鉴于这些细节，应该不难实施。 – geocodezip

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

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

来源

2012-11-26 20:44:14 wf9a5m75

我还没有得到这个工作，我的目的呢。而且我仍然在查找和从我的json文件中提取填充颜色时遇到问题。 – LauraNMS

我得到了在一个城市工作的代码。现在我只需要弄清楚如何查找并从json文件中提取正确的颜色。 – LauraNMS

你的代码让我走上正轨！谢谢！我正在做的是建立一个循环，并将选项推入数组中：for（var i = 0; i LauraNMS

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

回答

相关问题