我如何做一个简单的邮政编码地图，显示与Google Maps API V3的界限？ [英] How do I do a simple zip code map showing boundaries with Google Maps API V3?
问题描述
我需要显示一个带有邮政编码的交互式地图，其中显示了邮政编码的边界和颜色，如下所示： http://www.usnaviguide.com/zip.htm
输入在美国邮政编码并点击查找邮政编码。 我可能忽视了它，但我没有找到这方面的例子，也没有专门在Google Maps API文档中讨论这方面的文档。我试图在上面的网页链接上查看源代码，但它对我来说似乎并不明显。在页面上还有其他的东西，我不知道它是否是我需要或不需要的部分。
一些简单的代码示例会非常有帮助！感谢！
这是美国的一个邮政编码地图，我将它与FusionTablesLayers放在一起：
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html 它没有不同的颜色，但你可以改变它。 John Coryat制作使用平铺服务器的地图，您可以使用Google Maps API v3自定义地图。 示例代码片段： 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 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. Some simple code examples would be very helpful! Thanks! Here is a zipcode map for the US that I put together with FusionTablesLayers: 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. code snippet from example:
这篇关于我如何做一个简单的邮政编码地图，显示与Google Maps API V3的界限？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
google.load（'visualization'，'1'，{'packages'：[ 'corechart'，'table'，'geomap']}）; var map; var labels = []; var layer; var tableid = 1499916; function initialize（）{geocoder = ne w 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（地图）; 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由于以下原因不成功：+ status）;}}）; }函数displayZips（）{//使用当前边界设置查询var queryStr =选择几何，ZIP，纬度，经度FROM+ tableid +WHERE ST_INTERSECTS（geometry，RECTANGLE（LATLNG+ map.getBounds（）。getSouthWest （）+ 经纬度 + map.getBounds（）getNorthEast（）+））。 var queryText = encodeURIComponent（queryStr）; var query = new google.visualization.Query（'http://www.google.com/fusiontables/gvizdata?tq='+ queryText）; // alert（queryStr）; //设置回调函数query.send（displayZipText）;} var infowindow = new google.maps.InfoWindow（）;函数displayZipText（response）{if（！response）{alert（'no response'）;返回;} if（response.isError（））{alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））; return;} if（map.getZoom（）< 11）return; FTresponse =回应; //有关响应对象的更多信息，请参阅文档//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 ）+ 经纬度 + map.getBounds（）getNorthEast（）+））。 * / for（i = 0; i
#map_canvas {width：610px; height：400px; }
< script type =text / javascriptsrc = http://www.google.com/jsapi >< /脚本> < script type =text / javascriptsrc =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 >< /脚本><形式> < span class =style51>< span class =style49>显示< / span>：< / span> < input id =addresstype =textvalue =11501>< / input>< input id =geocodetype =buttononclick =codeAddress（document.getElementById（'address' ）。值）;值= 地理编码 >< /输入> < div id =map_canvas>< / div> 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>
