Gradient for Fusion Table Layer

问题

Can anyone explain why the gradient isn't working for the map below?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Riks.txt - Google Fusion Tables</title>
<style type="text/css">
 html, body, #map_canvas {
   margin: 0;
   padding: 0;
   height: 100%;
 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.7&amp;sensor=false">

</script>
<script type="text/javascript">
function initialize() 
{
  map = new google.maps.Map
  (document.getElementById('map_canvas'), 
  {
    center: new google.maps.LatLng(59.53726545292721,18.12209266712103),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "MP",
      from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
      where: ""
    },

styles: [
  {
    styleId: 2,
    polygonOptions: {
      fillOpacity: 1,
      fillColorStyler: {
        expression: "MP",
        min: 0,
        max: 100,
        gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
      },
      strokeWeight: 1,
      strokeOpacity: 0.3,
      strokeColor: '#000000'
    }
  }
]

});



  layer.setOptions({
    styleId: 2,
    templateId: 0
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script></head>
<body><div id="map_canvas"></div></body></html>

回答1:

I coulnd't find the syntax to dynamically apply a gradient (from where do you have your example?). There is a description of the styles that are returned by Fusion Tables, but the syntax of the returned style doesn't seem to work. So my guess is, that it's not (yet?) possible to do.

But, if it's not important for you to do this dynamically, you can define the gradient in the Fusion Tables Web UI:

If you want to create several styles, you can add multiple maps. To do so, you have to switch to the switch to the new look (see the link in the web ui in the upper right corner "Switch to new look"). Then you can add a new map using the "+" button:

If you specified all the styles you need in the web UI, you can start to use them in FusionTablesLayer like that (I made a copy of your table to test that):

layer = new google.maps.FusionTablesLayer({
    map: map,
    query: {
        select: "MP",
        from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
        where: ""
    },
    styleId: 2
});

styleId 1 is the default, then 2 is the first one you added, 3 the second and so on. I created 2 styles for my copied table.

Here is the example on jsFiddle to try out: http://jsfiddle.net/odi86/gPjE3/

Just change styleId: 2 (gradient on column MP) to styleId: 3 (gradient on column M) and see what happens.

I hope this helps.

回答2:

Only a small subset of supported styles map be set dynamically through the Maps API. See the Maps API Documentation for FusionTablesPolygonOptions.

To achieve the styles you specified:

Set the styles you desire on the Map Visualizatioon in the Fusion Tables Interface
Retrieve the stored styleId from Fusion Tables. Use the API Explorer to retrieve all the stored styles.
Set the desired styles using through the Maps API by referencing the styleId

Example API Usage

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "MP",
    from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
    where: ""
  },
  styleId: 3
});

回答3:

Assuming you are not making a heat map (in which you should use the default stylers in Goog Drive), the correct method is to manually create your own gradient by query.

Within initialize... Create your plain fusionlayer

var fusionlayer = new google.maps.FusionTablesLayer({
    query: {
        select: '*',
        from: tableID
    }
});

I prefer to place the styler into a function because you may call forth different columns of data to gradientize.

function changeMap(tableValue) { 
    var newStyle = [
    {
      where: tableValue + "< 0.01",
      polygonOptions: {
        fillColor: "#CCCCCC",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.01 AND" + tableValue + "< 0.05",
      polygonOptions: {
        fillColor: "#fefb8c",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + " >= 0.05 AND" + tableValue + "< 0.10",
      polygonOptions: {
        fillColor: "#ff9233",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }, {
      where: tableValue + ">= 0.10",
      polygonOptions: {
        fillColor: "#800000",
        strokeColor: "#FFFFFF",
        strokeWeight: 0
      }
    }];

    fusionLayer.setOptions({
      'styles': newStyle,
    });
};

Customize your greater than or equal to queries and colors as you wish.

I also have a reset function to "clear" the map. This is oft important given that you are merely changing the visual appearance of the map.

function defaultMap() { 
    fusionlayer.setOptions({
      'styles': [{ 
          polygonOptions: {
            fillColor: "#cccccc",
            strokeColor: "#dddddd",
            strokeWeight: 0
          }     
        }],
    });

    }

来源：https://stackoverflow.com/questions/11791898/gradient-for-fusion-table-layer

标签

google-maps

google-maps-api-3

google-fusion-tables