Fusion table api map not showing styles after tabl

2019-02-26 01:07发布

问题:

I'm relatively new to the Fusion Tables Api and I am trying to create a simple web app using Fusion Tables and Google Maps Api. The application will be used about three times a day and each time a new set of data will be added to the table, replacing the old entries with new ones.

So far, the application is working as expected, except for when changes are made to the fusion table. When I add or delete multiple rows from the table manually through the Fusion Table page and then return to my app, I notice that the styles stop working properly, and in many cases do not appear at all; however, after about an hour everything starts working normally again.

The code I use for creating the styles is this,

layer = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: '11CIZUlNjBPiOM1Y4pDUP_Mn9TxkqF0etfpWhi5c'
    },
    styles:[
    {
        polygonOptions:{
                fillColor: '#FF0000',         
                fillOpacity: 0.05 
                }
    },
    {
        where: "Location LIKE 'PERDUE'",
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.2
        } 
    },
    {
        where: "GeoBlock = 'AC1C'",
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.8
        }
    },
    {
        where: "Location = 'BENGOUGH'",
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.99
        }  
    }]
  });

  layer.setMap(map);

I've researched a bit to see if anyone else is having similar issues, and the closest thing that I've come across that is similar to the problem I am having is that it may be a cache issue with the browser, but I've tested this scenario with multiple machines at the same time and have been getting the same result and I've also added the no-cache tag to my code to prevent the browser from caching the styles. I'm not sure if this is an Api issue or something else. I will appreciate any suggestions on how to approach this problem.

Thanks,

回答1:

It's an API-issue, the tiles created to display the layers will also be cached by google.

What you can do: modify the queries, so that it still fetches the same results, but the String-representation for the query is different. This should speed-up the tile-update(and prevent from client-side caching).

Taking your code it could be done like this:

var and=' Location does not contain "'+new Date().getTime()+'"';

 layer = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: '11CIZUlNjBPiOM1Y4pDUP_Mn9TxkqF0etfpWhi5c',
      where: and
    },
    styles:[
    {
        polygonOptions:{
                fillColor: '#FF0000',         
                fillOpacity: 0.05 
                }
    },
    {
        where: "Location LIKE 'PERDUE' and "+and,
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.2
        } 
    },
    {
        where: "GeoBlock = 'AC1C' and "+and,
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.8
        }
    },
    {
        where: "Location = 'BENGOUGH' and "+and,
        polygonOptions: {
        //fillColor: '#0000FF'
        fillOpacity:0.99
        }  
    }]
  });

Instead of using new Date().getTime() I would suggest to use(when available) e.g. the timestamp of the last modification so that the cached tiles still may be used when no update has been done.