如何使用Google Maps API V3显示简单的邮政编码地图？

Question

我需要显示一个带有邮政编码的交互式地图，显示其边界，并为邮政编码设置不同的颜色，如下所示：

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

输入美国邮政编码，然后单击“查找邮政编码”。

也许我忽略了它，但我没有找到这方面的例子和文档在Google Maps API文档中专门讨论这个问题。 我正在尝试在上面的网页链接上做一个视图源，但它对我来说似乎并不明显它是如何工作的。 页面上还有其他东西我不知道它是否是我需要的部分。

一些简单的代码示例将非常有用！ 谢谢！

Answer 1

这是我与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(); 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); } }); } 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(); 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({ 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); } // 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> <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> <div id="map_canvas"></div> 

Answer 2

要绘制区域，您可以使用谷歌地图API中的多边形 ，但是您需要要绘制的州或城市边界或zipcodes的数据。

您可以在该多边形示例中使用视图源，如果您已经使用Google地图，则非常容易，只需将Polygon Obj传递给LatLng objs数组即可完成

关于数据，我认为你可以在这样的融合表中找到它，这是针对美国邮政编码的。

Answer 3

我有同样的问题四处寻找我可以在网站上使用的邮政编码地图。 我偶然发现这个免费的项目有点慢，但完全符合我的要求： http ： //www.openheatmap.com/

非常适合个人使用，在向用户显示时效果不佳。 如果有人和我的情况相同，我希望这可以帮助他们。

Answer 4

一个简单的API，用于获得您想要的： https ： //www.mashape.com/vanitysoft/boundaries-io

以上API按邮政编码，城市和州显示US Boundaries（GeoJson）。 您应该以编程方式使用API​​来处理大型结果。

例如：