2012-08-28 34 views
6

Tengo un control personalizado grande (300 * 500px) en el lado izquierdo de mi mapa de google. Estoy agrupando mis marcadores juntos. Cuando un usuario hace clic en un marcador, quiero acercar el mapa para mostrar los marcadores en ese clúster.Cómo hacer que fitBounds tenga en cuenta los controles personalizados

El problema es:

Cuando llego a los límites de mi colección marcador, a continuación, map.fitBounds(collection_bounds), termino con los marcadores debajo de mi gran control. ¿Hay alguna manera de evitar que fitBounds use el puerto de vista completa?

He tratado de conseguir el LatLng al sur de mi punto de límites al oeste, la conversión que a los píxeles, que se mueve en 300px, convirtiendo después de que volver a un LatLng de usar como el nuevo punto al sur oeste límites. Sin embargo, esto no funciona porque los cálculos se hacen antes del zoom, por lo que el cambio de 300 px termina siendo demasiado ... Pensé en escribir mi propio fitBounds, pero me parece el mismo problema, ya que se hace antes del enfocar.

+2

Encontrar a esta respuesta en Google ..., todo lo que necesito ahora es el código para "conseguir el LatLng de mi punto sur oeste límites, la conversión que a los píxeles, que se mueven en 300px, a continuación, convertir ese nuevo a un LatLng " –

+1

Tuve el mismo tipo de problema y lo resolví usando' map.panBy (x, y) 'para cambiar mi mapa. – tomvo

+0

Eche un vistazo a: http://jsfiddle.net/upsidown/2wej9smf/ (no es mío lo acabo de encontrar mientras buscaba la solución de un problema similar) – jmarceli

Respuesta

4

Lo que dijo obras:

I ha intentado conseguir el LatLng de mi al sur de West Point límites, conversión que a los píxeles, que se mueve y 300px, entonces la conversión de dicha de nuevo a un LatLng a utilizar como el nuevo punto de límites del suroeste.

si lo haces en dos pasos, que es bastante transparente para el usuario porque se ejecuta tan rápido que casi no lo notas. Entonces, primero haces un map.fitBounds(bounds); normal donde los límites solo están definidos por tus marcadores, y luego te reajustas con la técnica que describes. Entonces:

google.maps.event.addListenerOnce(map,'bounds_changed',function(){ 
    // re-adjust bounds here as you described. 
    // This event fires only once and then the handler removes itself. 
    }); 
    map.fitBounds(bounds); 
+0

¡Gracias! No consideré hacer esto. Parece que este truco es la única forma. – Soup

3

Tenía un panel ancho de 400 píxeles en el tamaño de la mano derecha.

A partir de una llamada a zoomWithPoints pasando dos puntos para incluir en la vista, el siguiente código implementa el enfoque que otros han descrito: 1) Zoom a límites 2) Usando el nivel de zoom resultante calcule cuánto agregar al 'maxLon' 3) Zoom a los límites de nuevo.

function zoomToBbox(minLat, minLon, maxLat, maxLon) { 
    var southwest = new google.maps.LatLng(minLat, minLon); 
    var northeast = new google.maps.LatLng(maxLat, maxLon); 
    var bounds = new google.maps.LatLngBounds(southwest, northeast); 
    map.fitBounds(bounds);  
} 

function zoomWithPoints(lat1, lon1, lat2, lon2) { 
    var maxLat = Math.max(lat1, lat2); 
    var maxLon = Math.max(lon1, lon2); 
    var minLat = Math.min(lat1, lat2); 
    var minLon = Math.min(lon1, lon2); 

    zoomToBbox(minLat, minLon, maxLat, maxLon); 

    var z = map.getZoom(); //get the zoom level after zooming 

    // Add a bit to maxLon, to result in it panning left by 400 pixels 
    var widthOfPanel = 400; 
    var degreesPerTile = 360/(Math.pow(2,z)); 
    var degreesPerPx = degreesPerTile/256; 
    var degreesForPanel = degreesPerPx * widthOfPanel; 

    maxLon = maxLon + degreesForPanel; 

    //zoom (pan across a bit) to take account of the added bit 
    zoomToBbox(minLat, minLon, maxLat, maxLon); 

    map.setZoom(z); //put it back to right zoom level if necessary 
} 

...call zoomWithPoints 
Cuestiones relacionadas