Fusion Tables图层URL请求限制（2048个字符） [英] Fusion Tables layer URL request limit (2048 chars)
问题描述
我使用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， '公司'， 'AR'， 'AM'， 'AU'， 'AT'， 'AZ'， 'BS'， 'BH'， 'BD'， 'BB'， '用'， '是' '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'， '通用'， 'GE'， 'DE'， 'GH'， 'GR'， 'GD'， 'GT' 'GN'， 'GW'， 'GY'， 'HT'， 'HN'， 'HU'，IS ，'IN'，'ID'，'CI'，'IR'，'IQ'，'IE'，'IL'）
}，
选项：{suppressInfoWindows：true}，
款式：[{
polygonOptions：{
fillColor：＃000000，
strokeWeight：0，
fillOpacity：0.4
}
}]
}）;
当我尝试从表中获取太多物品时，问题就开始了。 Google使用一个包含所有查询值的URL来获取所需的数据，并且使用URL编码，它可以增长得相当长。
您可以看到如果您打开控制台并检查错误中引发的URL，请在这里输入网址：
http://jsfiddle.net/4mtyu/690/
它在该特定示例中生成的URL是3749字符，超过2048个字符的限制。
有没有人有任何想法，我可以阻止URL变大，但同时仍然能够选择150+项目？
最简单的解决方案是移动客户端的东西：
http://jsfiddle.net/4mtyu/725/
第一部分::初始化地图和融合表
你可以这样做不管你喜欢，只要确保融合表具有所选的所有国家。例子： （a）一旦您拥有完整的国家/地区列表，您必须对它们进行排序。一个简单的 示例：
pre $ 函数初始化（）{
//设置
var myOptions = {
zoom：2，
center：new google.maps.LatLng（10，0），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
//获取地图div
map = new google.maps.Map（document.getElementById（'map_div'），
myOptions）;
//初始化填充的JSON请求
var script = document.createElement（'script'）;
var url = ['https://www.googleapis.com/fusiontables/v1/query？'];
url.push（'sql ='）;
//选择所有国家！
var query ='SELECT name，kml_4326 FROM'+
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent（query）;
//生成URL
url.push（encodedQuery）;
url.push（'& callback = drawMap'）; //回调
url.push（'& key = AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'）; //选择所有国家
script.src = url.join（ ''）;
//将脚本添加到文档
var body = document.getElementsByTagName（'body'）[0];
body.appendChild（script）;
$ / code>
第2部分::排序国家和渲染
indexOf 检查应该有效。在排序后，我们需要把我们的国家转换成LatLon坐标系，这是在 constructNewCoordinates 函数中完成的（见下文）
var countries = [...];
//这是上述函数的回调
函数drawMap（data）{
//获取国家
var rows = data ['rows'] ;
for（var i in rows）{
//（a）//
//如果国家匹配我们的填充国家数组
if （countries.indexOf（rows [i] [0]）！== -1）
var newCoordinates = [];
//（b）//
//生成几何图形和
//检查多个几何体的国家
var geometries = rows [i] [1] [ '几何形状'];
if（geometry）{
for（var j在几何体中）{
//调用我们的渲染函数，返回多边形坐标（见最后一步）;
newCoordinates.push（constructNewCoordinates（geometry [j]））;
}
} else {
//调用我们的渲染函数，返回多边形坐标（见最后一步）;
newCoordinates = constructNewCoordinates（rows [i] [1] ['geometry']）;
}
//（c）//
//生成多边形
var country = new google.maps.Polygon（{
paths：newCoordinates ，
strokeWeight：0，
fillColor：'＃000000'，
fillOpacity：0.3
}）;
//将多边形添加到地图
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]））;
}
返回newCoordinates;
}
I'm using Google Maps to highlight a bunch of countries using Fusion Tables to grab the geometry. You can see an example of this here:
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
}
}]
});
The problems begin when I try to grab too many items from the table. Google uses a URL with all of the query values to grab the data required and with URL encoding it can grow to be quite large in length.
You can see an example of the URL here if you open up the console and check the URLs being thrown in the errors:
http://jsfiddle.net/4mtyu/690/
The URL it generates in that particular example is 3749 characters, way over the 2048 character limit.
Does anybody have any ideas on a way I could prevent the URL from getting this large but at the same time still be able to select 150+ items?
The easiest solution is to move things client-side: http://jsfiddle.net/4mtyu/725/
Part 1 :: Initialize the map and fusion tables
You can do this how ever you prefer, just make sure the fusion tables have all countries selected. Example:
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);
}
Part 2 :: Sort countries and render
(a) Once you have the full list of countries, you have to sort them. A simple
indexOfcheck should do the trick.(b) After sorting we need turn our countries into LatLon Coordinates, this is done in the
constructNewCoordinatesfunction (see below)(c) Then all that's left is to generate the polygon and add it to our map!
Example:
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);
}
}
}
}
Part 3 :: Generating the coordinates
// (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;
}
这篇关于Fusion Tables图层URL请求限制（2048个字符）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
