Google Maps API V3 - 通過採用InfoBox標籤Fusion Tables多邊形

我試圖在Google Maps API V3中通過採用InfoBox來標記Fusion Tables多邊形，對此我使用http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html, 的示例，但代碼（如下所示）不要顯示標籤：Google Maps API V3 - 通過採用InfoBox標籤Fusion Tables多邊形

<!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>

有沒有人有任何建議？

最好的問候，達科

來源

2013-05-12 Darko J

我得到一個JavaScript錯誤「谷歌是不確定的」。

看起來您並未在正確的地方包含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>

來源

2013-05-12 14:46:22 geocodezip

您好：感謝您的及時答覆。 Google Maps Javascript API v3包含哪些地方？我有點困惑。你能顯示代碼嗎？ – 2013-05-12 14:51:27

看到我的編輯（或者你開始使用的例子，只需在Maps API之後添加信息框腳本和geoxml3） – geocodezip 2013-05-12 14:57:44

我不敢相信這是一個問題，我在另一個方向尋找錯誤。非常感謝你，你幫了我很多。 – 2013-05-12 15:02:05

Google Maps API V3 - 通過採用InfoBox標籤Fusion Tables多邊形

回答

相關問題