Json Google Maps API V3-使用InfoBox标记融合表多边形_Json_Google Maps Api 3_Jsonp_Google Fusion Tables_Jsapi

Json Google Maps API V3-使用InfoBox标记融合表多边形

json google-maps-api-3

Json Google Maps API V3-使用InfoBox标记融合表多边形,json,google-maps-api-3,jsonp,google-fusion-tables,jsapi,Json,Google Maps Api 3,Jsonp,Google Fusion Tables,Jsapi,我正在Google Maps API V3中尝试通过使用InfoBox来标记融合表多边形，为此，我使用了，但如下所示的代码不显示标签： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Label Fusion Tables polygons by employing InfoBox</title> <st

我正在Google Maps API V3中尝试通过使用InfoBox来标记融合表多边形，为此，我使用了，但如下所示的代码不显示标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Label Fusion Tables polygons by employing InfoBox</title>

<style>
#map_canvas { width: 610px; height: 400px; }
.style1 {font-size: 14px}
</style>

<!--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://maps.google.com/maps/api/js?sensor=false"></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" src="http://www.google.com/fusiontables/gvizdata?tq="></script>


<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var map;
var labels = [];
var layer;
var tableid =  1499916;

function initialize() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.23032838760389, -118.65234375),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'geometry' FROM " + tableid);
  layer.setMap(map);

  codeAddress();

  google.maps.event.addListener(map, "bounds_changed", function() {
    displayZips();
  });
  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() < 11) {
      for (var i=0; i<labels.length; i++) {
        labels[i].setMap(null);
      }
    }
  });
}

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 displayZips() {
  //set the query using the current bounds
  var queryStr = "SELECT geometry, ZIP, latitude, longitude 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(displayZipText);
}

var infowindow = new google.maps.InfoWindow();

function displayZipText(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  if (map.getZoom() < 11) return;
  FTresponse = response;

  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  for(i = 0; i < numRows; i++) {
      var zip = response.getDataTable().getValue(i, 1);
      var zipStr = zip.toString()
      while (zipStr.length < 5) { zipStr = '0' + zipStr; }
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 2)),
          parseFloat(response.getDataTable().getValue(i, 3)));

      labels.push(new InfoBox({
      content: zipStr
      ,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> 
<span class="style1">Show:</span> 
<input id="address" type="text" value="07646" ></input>
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode"></input>   
<div id="map_canvas"></div>
</body>
</html>

有人有什么建议吗

致以最良好的祝愿，

Darko

我发现一个javascript错误，google没有定义

看起来您没有将Google Maps Javascript API v3包含在geoxml3和infobox所需的正确位置。如果我修正了，我会在多边形上看到邮政编码标签

<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.com/fusiontables/gvizdata?tq="></script>

嗨，谢谢你的及时回复。哪里是包含GoogleMapsJavaScriptAPI v3的正确位置？我有点困惑。你能显示代码吗？请看我的编辑或你开始的示例，只需在映射后包含infobox脚本和geoxml3。我无法相信这是一个问题，我在另一个方向上寻找错误。非常感谢，你帮了我很多。