如何製作顯示Google Maps API V3邊界的簡單郵政編碼地圖？

我需要爲這樣的郵政編碼顯示與顯示其邊界郵政編碼交互式地圖，並有不同的顏色：如何製作顯示Google Maps API V3邊界的簡單郵政編碼地圖？

http://www.usnaviguide.com/zip.htm

輸入美國的郵政編碼，然後點擊「查找郵政編碼」。

也許我忽略了它，但我沒有找到這方面的例子和專門在Google Maps API文檔中討論這個問題的文檔。我試圖在上面的網頁鏈接上查看源代碼，但它對我來說似乎並不明顯。頁面上還有其他的東西，我不知道它是否是我需要或不需要的部分。

一些簡單的代碼示例將非常有幫助！謝謝！

來源

2012-10-08 Edward

這裏是美國的一個郵政編碼地圖，我與FusionTablesLayers放在一起：

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html

它不具有不同的顏色，但你可以改變這種狀況。

John Coryat使用平鋪服務器製作了該地圖，您可以使用Google Maps API v3自定義地圖進行同樣的操作。從例如

代碼片段：

google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); 
 
var map; 
 
var labels = []; 
 
var layer; 
 
var tableid = 1499916; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    \t 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("11501" /*document.getElementById("address").value*/); 
 

 
    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(address) { 
 
    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); 
 
     } 
 
    }); 
 
    } 
 
    \t \t 
 
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); 
 
    // alert(queryStr); 
 

 
    //set the callback function 
 
    query.send(displayZipText); 
 

 
} 
 
    
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
\t \t 
 
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; 
 
    //for more information on the response object, see the documentation 
 
    //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
 
    numRows = response.getDataTable().getNumberOfRows(); 
 
    numCols = response.getDataTable().getNumberOfColumns(); 
 
/* var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM "+ tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG"+map.getBounds().getSouthWest()+",LATLNG"+map.getBounds().getNorthEast()+"))"; 
 
*/ 
 

 
    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))); 
 
     // bounds.extend(point); 
 
     labels.push(new InfoBox({ 
 
\t content: zipStr 
 
\t ,boxStyle: { 
 
\t border: "1px solid black" 
 
\t ,textAlign: "center" 
 
      ,backgroundColor:"white" 
 
\t ,fontSize: "8pt" 
 
\t ,width: "50px" 
 
\t } 
 
\t ,disableAutoPan: true 
 
\t ,pixelOffset: new google.maps.Size(-25, 0) 
 
\t ,position: point 
 
\t ,closeBoxURL: "" 
 
\t ,isHidden: false 
 
\t ,enableEventPropagation: true 
 
     })); 
 
     labels[labels.length-1].open(map); 
 
    } 
 
    // zoom to the bounds 
 
    // map.fitBounds(bounds); 
 
} 
 

 
google.maps.event.addDomListener(window,'load',initialize);

#map_canvas { width: 610px; height: 400px; }

<script type="text/javascript" src="http://www.google.com/jsapi"></script>   
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
 

 

 
<form> 
 
    \t  <span class="style51"><span class="style49">Show</span>:</span> 
 
<input id="address" type="text" value="11501" ></input> 
 
<input id="geocode" type="button" onclick="codeAddress(document.getElementById('address').value);" value="Geocode"></input> \t 
 
<div id="map_canvas"></div>

來源

2012-10-08 13:15:24 geocodezip

它返回資訊盒沒有被定義 – Sana