Javascript 如何使用 Google Maps API V3 制作显示边界的简单邮政编码地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12782034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I do a simple zip code map showing boundaries with Google Maps API V3?
提问by Edward
I need to display an interactive map with zip codes showing their boundaries and have different colors for the zip codes like this:
我需要显示一个带有邮政编码的交互式地图，显示它们的边界，并且邮政编码具有不同的颜色，如下所示：
http://www.usnaviguide.com/zip.htm
http://www.usnaviguide.com/zip.htm
Enter in a US zip code and click on "Find Zip code".
输入美国邮政编码，然后单击“查找邮政编码”。
Perhaps I am overlooking it, but I've not been to find examples of this and documentation talking about this specifically at Google Maps API documentation. I've trying doing a view source on the above web page link, but it doesn't seem obvious to me how it works. There is also other stuff on the page which I don't know if it's part of what I need or not.
也许我忽略了它，但我还没有在 Google Maps API 文档中找到有关此内容的示例和专门讨论此内容的文档。我试图在上面的网页链接上查看源代码，但对我来说它是如何工作的似乎并不明显。页面上还有其他东西，我不知道它是否是我需要的一部分。
Some simple code examples would be very helpful! Thanks!
一些简单的代码示例会很有帮助！谢谢！
回答by geocodezip
Here is a zipcode map for the US that I put together with FusionTablesLayers:
这是我与 FusionTablesLayers 放在一起的美国邮政编码地图：
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html
It doesn't have different colors, but you could change that.
它没有不同的颜色，但你可以改变它。
John Coryat made that map using a tile server, you can do the same with Google Maps API v3 custom maps.
John Coryat 使用切片服务器制作了该地图，您可以使用 Google Maps API v3 自定义地图执行相同操作。
code snippet from example:
示例中的代码片段：
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>回答by Cristiano Fontes
To draw the regions you can use a Polygonfrom google maps API, but you will need the data of the boundaries of the states or cities or zipcodes you want to draw.
要绘制区域，您可以使用谷歌地图 API 中的多边形，但您需要州或城市的边界数据或要绘制的邮政编码。
You can use view source in that polygon example, it's very easy if you have Google maps already working you just pass the Polygon Obj an array of LatLngobjs and it's done
您可以在该多边形示例中使用视图源，如果您已经使用 Google 地图，这很容易，您只需向 Polygon Obj 传递LatLngobjs数组即可
About the data I think you can find it in a fusion table like thiswhich is for US Zip codes.
回答by Steven Rogers
I was having the same issue looking around for a zipcode map I can use on a website. I stumbled on this free project that is a tad slow but fits exactly what I am looking for: http://www.openheatmap.com/
我在四处寻找可以在网站上使用的邮政编码地图时遇到了同样的问题。我偶然发现了这个免费项目，它有点慢，但正好符合我的要求：http: //www.openheatmap.com/
Great for personal use, not so good when displaying to users. If someone was in the same situation as me, I hope this helps them out.
非常适合个人使用，但在向用户展示时不太好。如果有人和我的情况一样，我希望这可以帮助他们。
回答by Jeryl Cook
A simple API to use to get what you want: https://www.mashape.com/vanitysoft/boundaries-io
一个简单的 API 用来获得你想要的东西：https: //www.mashape.com/vanitysoft/boundaries-io
Above API shows US Boundaries(GeoJson) by zipcode,city, and state. you should use the API programatically to handle large results.
上面的 API 按邮政编码、城市和州显示了美国边界（GeoJson）。您应该以编程方式使用 API 来处理大型结果。
for example:
例如：
