Javascript Fusion Tables层URL请求限制（2048个字符）

我正在使用谷歌地图来突出一些国家使用融合表来获取几何图形。您可以在此处看到这样一个示例：

当我试图从表中抓取太多的项目时，问题就开始了。谷歌使用一个包含所有查询值的URL来获取所需数据，通过URL编码，它的长度可能会变得相当大

如果打开控制台并检查错误中抛出的URL，您可以在此处看到URL示例：

在该特定示例中，它生成的URL为3749个字符，远远超过2048个字符的限制

---

有没有人有什么想法可以阻止URL变大，但同时仍然可以选择150多个项目？

最简单的解决方案是将内容移动到客户端：

---

第1部分：初始化映射表和融合表 您可以根据自己的喜好执行此操作，只需确保fusion表中选择了所有国家即可。例如：

function initialize() {
    //settings
    var myOptions = {
      zoom: 2,
      center: new google.maps.LatLng(10, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //get map div
    map = new google.maps.Map(document.getElementById('map_div'),
        myOptions);

    // Initialize padded JSON request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');

    //select all the countries!! 
    var query = 'SELECT name, kml_4326 FROM ' +
        '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
    var encodedQuery = encodeURIComponent(query);

    //generate URL 
    url.push(encodedQuery);
    url.push('&callback=drawMap');//Callback
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');//select all countries
    script.src = url.join('');

    //Add Script to document
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
  }

第2部分：对国家/地区进行排序并呈现

• （a） 一旦你有了完整的国家列表，你就必须对它们进行排序。一个简单的

  indexOf

  检查就可以了

• （b） 排序后，我们需要将我们的国家转换为拉特隆坐标，这是在

  constructNewCoordinates

  函数中完成的（见下文）

• （c） 然后剩下的就是生成多边形并将其添加到地图中

例如：

var countries = [...];

//This is the callback from the above function
function drawMap(data) {
    //Get the countries 
    var rows = data['rows'];


    for (var i in rows) {
      // (a) //
      //If the country matches our filled countries array
      if (countries.indexOf(rows[i][0]) !== -1)

        var newCoordinates = [];

        // (b) //
        // Generate geometries and
        // Check for multi geometry countries 
        var geometries = rows[i][1]['geometries'];
        if (geometries) {
          for (var j in geometries) {
            //Calls our render function, returns Polygon Coordinates (see last step);
            newCoordinates.push(constructNewCoordinates(geometries[j]));
          }
        } else {
          //Calls our render function, returns Polygon Coordinates (see last step);
          newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
        }

        // (c) //
        //Generate Polygon
        var country = new google.maps.Polygon({
          paths: newCoordinates,
          strokeWeight: 0,
          fillColor: '#000000',
          fillOpacity: 0.3
        });


       //add polygon to map
        country.setMap(map);
      }
    }
  }
}

第3部分：生成坐标

---

相关问题：。从那里的注释中：您可以向表中添加一列，允许您使用更简单的查询选择这些行吗？你可能想添加标签，我看到谷歌开发者拥护者更经常地在那里活动。你需要一个普通地图，还是一个地理地图可以工作？我需要一个普通地图来应对这种情况。感谢你花时间提供一个惊人的答案，它在初始加载时似乎工作得很好。一旦“国家”在初始加载后更新，我就很难再次加载这些函数。在不删除脚本并再次执行所有步骤的情况下，再次运行这些函数的最佳方法是什么？或者这是唯一的办法？只是澄清一下。您希望地图可更新吗？如果是这样，我将编辑我的答案，使功能更模块化！嘿，是的-最初地图以0个国家开始，随着时间的推移，用户插入国家-因此我必须用新坐标更新多边形。下面是一个更新的脚本：：。如果您想要更多信息，请随时向我发送聊天信息谢谢您花时间提供详细的答案，我欠您一个！

var countries = [...];

//This is the callback from the above function
function drawMap(data) {
    //Get the countries 
    var rows = data['rows'];


    for (var i in rows) {
      // (a) //
      //If the country matches our filled countries array
      if (countries.indexOf(rows[i][0]) !== -1)

        var newCoordinates = [];

        // (b) //
        // Generate geometries and
        // Check for multi geometry countries 
        var geometries = rows[i][1]['geometries'];
        if (geometries) {
          for (var j in geometries) {
            //Calls our render function, returns Polygon Coordinates (see last step);
            newCoordinates.push(constructNewCoordinates(geometries[j]));
          }
        } else {
          //Calls our render function, returns Polygon Coordinates (see last step);
          newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
        }

        // (c) //
        //Generate Polygon
        var country = new google.maps.Polygon({
          paths: newCoordinates,
          strokeWeight: 0,
          fillColor: '#000000',
          fillOpacity: 0.3
        });


       //add polygon to map
        country.setMap(map);
      }
    }
  }
}

// (b) //
function constructNewCoordinates(polygon) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates) {
      newCoordinates.push(
          new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
  }