我尝试在 Google Maps API V3 中显示 Google Fusion Tables 的标签，当 Zoom 为 9 或更少时，我和我设置为标签显示；但是当页面在 Zoom for 4 处下载第一张地图时可以，有时（几乎总是）当我放大到 Zoom 9 或更低时，页面冻结并在我的浏览器（Firefox 20）中出现消息“查询错误：请求超时” .
代码如下：
<!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>
有谁知道为什么会这样？
最好的，达科