2010-08-23 20 views
16

que no tienen experiencia en el trabajo con Google Maps, pero me gustaría para incrustar un mapa "Elija su condado" en mi aplicación web. Mi aplicación solo está orientada a California, por lo que solo necesita admitir un estado, pero no puedo encontrar una manera fácil de hacerlo (sin dibujar manualmente polígonos de superposición para todas las líneas del condado).Google Maps con superposición de condados?

Supuse que fácilmente podría encontrar ejemplos de interfaces de estilo "Elija su condado" en Google de alguna manera, pero lo único que encontré fue esto - http://maps.huge.info/county.htm - y estoy inclinado a golpear su API para extraer la geometría de todo el estado si no puedo encontrar una mejor opción.

¿alguien tiene alguna experiencia o conocimiento para ayudar a hacer esto un poco más fácil?

Respuesta

14

Google Fusion Tables vincula ahora a State, County, and Congressional District data para todos los EE.UU..

El campo de la geometría de la tabla de fusión contiene un elemento Polygon para el objeto dado. Sus polígonos de límites de estado (y, en menor medida, los condados) se ven un poco de baja resolución en algunos lugares, pero puede ser lo suficientemente bueno para usted y debería ser relativamente fácil de obtener.

30

La API de Google Maps no proporciona polígonos condado, o cualquier otro fronteras predefinidos de estados o países. Por lo tanto, el problema principal aquí es obtener los datos del polígono.

Un polígono en la API de Google Maps se define mediante la construcción de una serie de objetos LatLng (asumiendo que usted está utilizando la versión 3 del API):

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) 
];  

A continuación, puede utilizar esta matriz para construir un objeto Polygon:

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

Y por último lo muestran en el mapa llamando al método setMap():

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

Si se mantiene una referencia al objeto Polygon, también puede ocultar que al pasar null al método setMap():

bermudaTriangle.setMap(null); 

Por lo tanto usted podría considerar la construcción de un objeto JavaScript con un nombre de propiedad para cada condado. Esto le permitirá buscar los objetos del polígono desde el nombre de los condados en O(1) (tiempo constante), sin tener que recorrer toda la colección. Consideremos el siguiente ejemplo:

// 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... 

El objeto counties será nuestro almacén de datos. Cuando un usuario busca de "El Dorado" que simplemente puede mostrar el polígono de la siguiente manera:

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

Si se mantiene una referencia al condado previamente buscado, también puede llamar a setMap(null) para ocultar el polígono anterior:

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'); 
} 

espero que esto consigue que va en la dirección correcta.

Cuestiones relacionadas