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

Fusion Tables layer URL request limit (2048 chars)

本文关键字：2048个 字符 Tables URL 请求 Fusion      更新时间：2023-09-26

我使用谷歌地图来突出显示使用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
    }
  }]
});

当我试图从桌子上抓太多的东西时，问题就开始了。谷歌使用一个包含所有查询值的URL来获取所需的数据，并且通过URL编码，它的长度可以增长到相当大。

如果你打开控制台并检查错误中抛出的URL，你可以在这里看到URL的例子：

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

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

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

最简单的解决方案是将东西移动到客户端：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( 排序后，我们需要将我们的国家转换为LatLon坐标，这是在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;
  }
相关文章：