以編程方式更改融合表多邊形顏色

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

以編程方式更改融合表多邊形顏色

回答

相關問題