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

Posted 2023-02-23

【中文标题】Fusion Tables 图层 URL 请求限制（2048 个字符）

【英文标题】：Fusion Tables layer URL request limit (2048 chars)

【发布时间】：2016-01-04 03:16:42

【问题描述】：

我正在使用 Google 地图突出显示使用 Fusion Tables 来抓取几何图形的一组国家/地区。你可以在这里看到一个例子：

http://jsfiddle.net/4mtyu/689/

var layer = new google.maps.FusionTablesLayer(
  query: 
    select: locationColumn,
    from: tableId,
    where: "ISO_2DIGIT IN ('AF','AL','DZ','AD','AO','AG','AR','AM','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BT','BO','BA','BW','BR','BN','BG','BF','BI','KH','CM','CA','CV','CF','TD','CL','CN','CO','KM','CG','CD','CR','HR','CU','CY','CZ','DK','DJ','DM','DO','EC','EG','SV','GQ','ER','EE','ET','FJ','FI','FR','GA','GM','GE','DE','GH','GR','GD','GT','GN','GW','GY','HT','HN','HU','IS','IN','ID','CI','IR','IQ','IE','IL')"
  ,
  options : suppressInfoWindows:true,
  styles: [
    polygonOptions: 
      fillColor: "#000000",
      strokeWeight: "0",
      fillOpacity: 0.4
    
  ]
);

当我试图从桌子上拿太多东西时，问题就开始了。 Google 使用包含所有查询值的 URL 来获取所需的数据，并且通过 URL 编码，它的长度可能会变得非常大。

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

http://jsfiddle.net/4mtyu/690/

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

是否有人对我可以阻止 URL 变得这么大但同时仍然能够选择 150 多个项目的方法有任何想法？

【问题讨论】：

相关问题：Google Maps - FusionTablesLayer - max number of items。从那里的 cmets：您可以在表中添加一个列，以便您使用更简单的查询选择这些行吗？您可能想添加 google-fusion-tables 标签，我看到 Google Developer 倡导者更频繁地在那里活动。

您需要法线贴图，还是使用 Geomap？

这种情况我需要一张法线贴图。

【参考方案1】：

最简单的解决方案是在客户端移动东西： http://jsfiddle.net/4mtyu/725/

---

第 1 部分 :: 初始化地图和融合表

您可以按照自己的喜好进行操作，只需确保融合表已选择所有国家/地区。示例：

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 部分 :: 生成坐标

// (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;
  

【讨论】：

感谢您抽出宝贵的时间提供令人惊叹的答案，它似乎在初始加载时运行良好。一旦“国家”在初始加载后更新，我很难再次加载这些函数。在不删除脚本并再次执行所有步骤的情况下再次运行这些函数的最佳方法是什么？还是只有这样？

只是为了澄清。您希望地图可更新吗？如果是这样，我将编辑我的答案以使功能更加模块化！

嘿，是的 - 所以最初地图从 0 个国家开始，随着时间的推移用户插入国家 - 所以我必须用新的坐标更新多边形。

这是一个更新的脚本 :: jsfiddle.net/4mtyu/733。如果您想了解更多信息，请随时向我发送聊天消息

感谢您抽出宝贵时间提供详细解答，我欠您一个！