Question

我尝试在Google Maps API V3中显示Google Fusion Tables的标签，当Zoom为9或更小时，我和我设置标签显示; 但是当页面下载第一张地图时，Zoom for 4是好的，有时（几乎总是）当我放大到缩放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: &nbsp;' + 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>

有谁知道为什么会这样？

最佳，达科

Google Maps API V3和Fusion Tables - 查询错误：请求超时

0 个答案: