Javascript 谷歌地图API V3和融合表-查询错误:请求超时
我尝试在Google Maps API V3中显示Google Fusion表的标签, 当缩放为9或更小时,I和I设置为标签显示; 但当页面在Zoom for 4下载第一张地图是可以的,有时几乎总是在我放大到Zoom 9或更小时,页面冻结,在我的浏览器Firefox 20中,我的查询中出现错误消息:请求超时 代码如下:Javascript 谷歌地图API V3和融合表-查询错误:请求超时,javascript,json,google-maps,jsonp,google-fusion-tables,Javascript,Json,Google Maps,Jsonp,Google Fusion Tables,我尝试在Google Maps API V3中显示Google Fusion表的标签, 当缩放为9或更小时,I和I设置为标签显示; 但当页面在Zoom for 4下载第一张地图是可以的,有时几乎总是在我放大到Zoom 9或更小时,页面冻结,在我的浏览器Firefox 20中,我的查询中出现错误消息:请求超时 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <he
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>USA</title>
<style>
#map_canvas { width: 1000px; height: 600px; }
.style1 {font-size: 14px}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var map;
var labels = [];
var layer;
var tableid = '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY';
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map_canvas'), {
//center: new google.maps.LatLng(38.410558,-100.209963),
//zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer();
var countylayerOptions = {
styles: [{
where: "POP10 < 10000",
polygonOptions: {
fillColor: "#E06464",
fillOpacity: 0.7,
strokeColor: "#333333",
strokeOpacity: 1.0,
strokeWeight: 1
}
},
{
where: "POP10 > 10000 and POP10 < 25000",
polygonOptions: {
fillColor: "#E3D72B",
fillOpacity: 0.7,
strokeColor: "#333333",
strokeOpacity: 1.0,
strokeWeight: 1
}
},
{
where: "POP10 > 25000 and POP10 < 50000",
polygonOptions: {
fillColor: "#D01A4A",
fillOpacity: 0.7,
strokeColor: "#333333",
strokeOpacity: 1.0,
strokeWeight: 1
}
},
{
where: "POP10 > 50000 and POP10 < 100000",
polygonOptions: {
fillColor: "#14505C",
fillOpacity: 0.7,
strokeColor: "#333333",
strokeOpacity: 1.0,
strokeWeight: 1
}
},
{
where: "POP10 > 100000",
polygonOptions: {
fillColor: "#14505C",
fillOpacity: 0.7,
strokeColor: "#333333",
strokeOpacity: 1.0,
strokeWeight: 1
}
}],
map: map,
query: {
select: 'Merge of Tigerline Shape Files 2012 and Gaz_places_national_2010',
from: '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY'
}
}
layer.setOptions(countylayerOptions);
layer.setMap(map);
codeAddress();
google.maps.event.addListener(map, "bounds_changed", function() {
displaynames();
});
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() < 9) {
for (var i=0; i<labels.length; i++) {
labels[i].setMap(null);
}
}
});
google.maps.event.addListener(layer, 'click', function(e) {
//update the content of the InfoWindow
e.infoWindowHtml = '<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Incorporated and census designated places'
+ '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left "> Population: ' + e.row['PLACEFP'].value + "<br />";
});
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
//map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function displaynames() {
//set the query using the current bounds
var queryStr = "SELECT geometry, name, INTPTLAT, INTPTLON FROM "+ tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG"+map.getBounds().getSouthWest()+",LATLNG"+map.getBounds().getNorthEast()+"))";
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(displaynameText);
}
var infowindow = new google.maps.InfoWindow();
function displaynameText(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
if (map.getZoom() < 9) return;
FTresponse = response;
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
for(i = 0; i < numRows; i++) {
var name = response.getDataTable().getValue(i, 1);
var nameStr = name.toString()
while (nameStr.length < 5) { nameStr = '0' + nameStr; }
var point = new google.maps.LatLng(
parseFloat(response.getDataTable().getValue(i, 2)),
parseFloat(response.getDataTable().getValue(i, 3)));
labels.push(new InfoBox({
content: nameStr
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,backgroundColor:"white"
,fontSize: "8pt"
,width: "50px"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,position: point
,closeBoxURL: ""
,isHidden: false
,enableEventPropagation: true
}));
labels[labels.length-1].open(map);
}
}
</script>
<body onload="initialize();">
<form>
<div id="panel_2" style="position:absolute; left:50%; top:0px; width:900px; height:30px; z-index:1; margin-left: -450px; visibility: hidden;">
<span class="style1">Show:</span>
<input id="address" type="text" value="USA" ></input>
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode"></input>
</div>
<div id="map_canvas" style="position:absolute; left:50%; top:30px; width:900px; height:700px; z-index:1; margin-left: -450px;"></div>
</body>
</html>
有人知道为什么会这样吗
最好的,
Darko您的查询有问题。我尝试更改var query=new google.visualization.query'http://www.google.com/fusiontables/gvizdata?tq=“+queryText;to var query=new google.visualization.query'https://www.google.com/fusiontables/api/query?sql='+queryText;-但我也有同样的错误。我仍然被这个问题困扰着,如果有人推荐一些好的代码检查程序或任何解决方案来解决我的错误,我将不胜感激。这只是Firefox20的问题吗?你上面的代码在Linux和IE8上的Firefox11.0中为我工作;我确实在查询中看到了一些错误:IE 8中的请求超时,但映射功能正常,可能您正在查询表以快速处理bounds_changed事件,可能您一次只需要允许一个正在进行的请求。不,这也是Google Chrome版本26中的一个问题,我有Windows 7操作系统。您是对的,在快速查询表时会出现此错误。我改变了google.maps.event.addListenermap,边界改变了,函数{displaynames;};到google.maps.event.addListenermap,idle,函数{displaynames;}。因此,事件从界限u变为空闲;使此错误发生的频率降低,但错误仍然存在。你认为有没有办法完全消除这个错误?