Ich muss eine interaktive Karte mit Postleitzahlen anzeigen, die ihre Grenzen anzeigen, und verschiedene Farben für die Postleitzahlen wie diese haben:

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

Geben Sie eine US-Postleitzahl ein und klicken Sie auf "Postleitzahl suchen".

Vielleicht übersehe ich es, aber ich habe keine Beispiele dafür und keine Dokumentation gefunden, die speziell in der Google Maps API-Dokumentation darüber sprechen. Ich habe versucht, eine Ansichtsquelle über den obigen Webseiten-Link zu erstellen, aber es scheint mir nicht offensichtlich, wie es funktioniert. Es gibt auch andere Dinge auf der Seite, von denen ich nicht weiß, ob sie Teil dessen sind, was ich brauche oder nicht.

Einige einfache Codebeispiele wären sehr hilfreich! Vielen Dank!

10
Edward 8 Okt. 2012 im 16:44

4 Antworten

Beste Antwort

Hier ist eine Postleitzahlkarte für die USA, die ich mit FusionTablesLayer zusammengestellt habe:

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

Es hat keine unterschiedlichen Farben, aber Sie können das ändern.

John Coryat hat diese Karte mithilfe eines Kachelservers erstellt. Sie können dies auch mit benutzerdefinierten Karten der Google Maps API v3 tun.

Codefragment aus Beispiel:

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>
10
geocodezip 5 Juni 2015 im 20:35

Eine einfache API, mit der Sie das bekommen, was Sie wollen: https://www.mashape.com/vanitysoft/boundaries-io

Die obige API zeigt US-Grenzen (GeoJson) nach Postleitzahl, Stadt und Bundesland. Sie sollten die API programmgesteuert verwenden, um große Ergebnisse zu verarbeiten.

Beispielsweise: Washington, DC mit allen Postleitzahlen in Grenzen

0
Jeryl Cook 24 Mai 2015 im 15:04

Ich hatte das gleiche Problem beim Suchen nach einer Postleitzahlenkarte, die ich auf einer Website verwenden kann. Ich bin auf dieses kostenlose Projekt gestoßen, das ein bisschen langsam ist, aber genau zu dem passt, was ich suche: http://www.openheatmap.com/

Ideal für den persönlichen Gebrauch, nicht so gut für die Anzeige für Benutzer. Wenn sich jemand in der gleichen Situation wie ich befand, hoffe ich, dass dies ihm hilft.

0
Steven Rogers 19 Nov. 2014 im 22:33

Zum Zeichnen der Regionen können Sie ein Polygon von Google verwenden Karten-API, aber Sie benötigen die Daten der Grenzen der Bundesstaaten oder Städte oder Postleitzahlen, die Sie zeichnen möchten.

In diesem Polygonbeispiel können Sie die Ansichtsquelle verwenden. Wenn Google Maps bereits funktioniert, übergeben Sie dem Polygonobjekt einfach ein Array von LatLng objs und fertig

Informationen zu den Daten finden Sie meiner Meinung nach in einer Fusionstabelle wie dieser für US-Postleitzahlen.

1
Cristiano Fontes 8 Okt. 2012 im 13:18