2010-08-23 17 views
16

Ich habe keine Erfahrung mit Google Maps zu arbeiten, aber ich möchte eine Karte "Wählen Sie Ihren Landkreis" in meine Webanwendung einbetten. Meine App zielt nur auf Kalifornien, also muss nur ein Zustand unterstützt werden, aber ich kann keinen einfachen Weg finden, dies zu tun (ohne Overlay-Polygone für alle Bezirkslinien manuell zu zeichnen).Google Maps mit Grafschaftsüberlagerung?

Ich nahm an, ich würde leicht in der Lage sein, Beispiele von "Wählen Sie Ihre Grafschaft" -Stil-Schnittstellen auf Google irgendwie zu finden, aber das einzige, was ich fand, war dies - http://maps.huge.info/county.htm - und ich bin auf ihre API zu neigen die Geometrie für den ganzen Staat zu ziehen, wenn ich keine bessere Option finde.

Hat jemand Erfahrung oder Einsicht, um dies ein wenig einfacher zu machen?

Antwort

14

Google Fusion Tables enthält jetzt Links zu State, County, and Congressional District data für alle USA.

Das Geometriefeld der Fusionstabelle enthält ein Polygon-Element für das angegebene Objekt. Ihre Zustandsgrenzen Polygone (und in geringerem Maße auch die Grafschaften) sehen an einigen Stellen etwas niedrig aus, aber es ist vielleicht gut genug für Sie und sollte relativ einfach zu greifen sein.

30

Die Google Maps-API stellt keine County-Polygone oder andere vordefinierte Grenzen von Staaten oder Ländern zur Verfügung. Daher besteht das Hauptproblem hier darin, die Polygondaten zu erhalten.

Ein Polygon auf der Google Maps API durch den Bau einer Reihe von LatLng Objekte definiert ist (vorausgesetzt, Sie die v3-API verwenden):

var bermudaTriangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.757370), 
    new google.maps.LatLng(25.774252, -80.190262) 
];  

Dann würden Sie dieses Array verwenden, um ein Polygon Objekt zu konstruieren:

var bermudaTriangle = new google.maps.Polygon({ 
    paths: bermudaTriangleCoords, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
}); 

Und schließlich zeigen sie auf der Karte durch die setMap() Methode aufrufen:

bermudaTriangle.setMap(map); // Assuming map is your google.maps.Map object 

Wenn Sie einen Verweis auf Ihr Polygon Objekt halten, können Sie es auch, indem null zur setMap() Methode verbergen:

bermudaTriangle.setMap(null); 

Daher könnten Sie für jeden Kreis ein JavaScript-Objekt mit einem Eigenschaftsnamen betrachten zu bauen. Dadurch können Sie die Polygonobjekte aus dem Namen der Landkreise in O(1) (konstante Zeit) abrufen, ohne die gesamte Sammlung durchlaufen zu müssen. Betrachten Sie das folgende Beispiel:

// Let's start with an empty object: 
var counties = {  
}; 

// Now let's add a county polygon: 
counties['Alameda'] = new google.maps.Polygon({ 
    paths: [ 
    // This is not real data: 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.757370), 
    new google.maps.LatLng(25.774252, -80.190262) 
    // ... 
    ], 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000", 
    fillOpacity: 0.3' 
}); 

// Next county: 
counties['Alpine'] = new google.maps.Polygon({ 
    // Same stuff 
}); 

// And so on... 

Das counties Objekt unserer Datenspeicher sein. Wenn ein Nutzer nach „El Dorado“ Sie einfach das Polygon zeigen können, wie folgt:

counties['El Dorado'].setMap(map); 

Wenn Sie einen Verweis auf den zuvor gesuchten Kreis halten, können Sie auch setMap(null) rufen Sie den vorherigen Polygon zu verbergen:

var userInput = 'El Dorado'; 
var latestSearch = null; 

// Check if the county exists in our data store: 
if (counties.hasOwnProperty(userInput)) { 
    // It does - So hide the previous polygon if there was one: 
    if (latestSearch) { 
    latestSearch.setMap(null); 
    } 
    // Show the polygon for the searched county: 
    latestSearch = counties[userInput].setMap(map); 
} 
else { 
    alert('Error: The ' + userInput + ' county was not found'); 
} 

Ich hoffe, das bringt dich in die richtige Richtung.