javascript - studio - marcar puntos en google maps api

Cómo acercarse sin problemas en un marcador en Google Maps?

Question

Me gustaría poder acercar sin problemas un marcador en Google Maps. Si uno simplemente establece el zoom con doble clic, el mapa se encuentra repentinamente en ese nivel de zoom, sin ninguna transición suave.

Al hacer zoom en un solo nivel más allá del nivel actual, Google Maps muestra una transición suave y agradable. Por lo tanto, debe ser posible acercarse sin problemas por más de un nivel, pero ¿cómo?

Answer 1

@Herman Schaaf Su solución es genial, pero cuando hace doble clic salta algunos zooms: D Así que hice una solución + smoothZoom afuera No puedo tomar todo el crédito He editado el código de JesseDobbelaere de jsfiddle.net Es una mezcla de los suyos y el código de Jesse.

function smoothZoom(map, level, cnt, mode)
{
    if(mode == true)
    {
        if (cnt >= level) {
            return;
        }
        else
        {
            if((maxZoomOut + 2) <= cnt)
            {
                var z = google.maps.event.addListener(map, ''zoom_changed'', function(event)
                {
                    google.maps.event.removeListener(z);
                    map.setCenter(marker.getPosition());
                    smoothZoom(map, level, cnt + 1, true);
                });
                setTimeout(function(){map.setZoom(cnt);}, timeOut);
            }
            else
            {
                map.setZoom(cnt);
                smoothZoom(map, level, cnt + 1, true);
            }
        }
    }
    else 
    {
        if (cnt < level) {
            return;
        }
        else
        {
            var z = google.maps.event.addListener(map, ''zoom_changed'', function(event)
            {
                google.maps.event.removeListener(z);
                map.setCenter(marker.getPosition());
                smoothZoom(map, level, cnt - 1, false);
            });
            if(maxZoomIn - 2 <= cnt)
            {
                map.setZoom(cnt);
            }
            else
            {
                setTimeout(function(){map.setZoom(cnt);}, timeOut);
            }
        }
    }
}    

He creado algunas variables más, como timeOut y maxZoomIn Out ... puedes encontrar el código completo en jsfiddle http://jsfiddle.net/dexy86/9afy9/

Answer 2

Este me funcionó muy bien:

function animateMapZoomTo(map, targetZoom) {
    var currentZoom = arguments[2] || map.getZoom();
    if (currentZoom != targetZoom) {
        google.maps.event.addListenerOnce(map, ''zoom_changed'', function (event) {
            animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
        });
        setTimeout(function(){ map.setZoom(currentZoom) }, 80);
    }
}

Answer 3

Esto se ampliará suavemente en la ubicación deseada. Intenta agregar estas líneas:

LatLng latLng = new LatLng(lat,lng);
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, ZOOM_FACTOR));

Answer 4

He intentado con las alternativas que figuran más arriba, sin embargo, cada vez que veo la transición en un navegador de escritorio o una aplicación móvil, todo ocurre instantáneamente, o al menos, dentro de un período de tiempo que es imperceptible para la vista debido al tiempo entre cada uno iteración de bucle, al menos en el hardware que he probado.

Usé el mismo ciclo que los otros métodos, pero alteré el tiempo de espera para que el zoom ocurriera más rápidamente cuando el nivel de zoom era más alto y más lento cuando era más bajo, por lo que los resultados eran más visibles.

En lugar de utilizar un período de tiempo de espera fijo, configuré el primer tiempo de espera en 0, y luego los tiempos de espera posteriores en la siguiente ecuación rápida y sucia

((1+ currentZoom) / maxZoom) * 500;

En el código, asumí que el zoom máximo es 18, pero puede usar maxZoom para averiguar cuál es el nivel de zoom para un lat / long determinado. Mi código es:

timeout = (1+map.getZoom() / 18) * 500;

Answer 5

Podría tratar de usar un setInterval para hacer zoom en un nivel a la vez, y borrarlo cuando alcance el nivel deseado.

El problema con esto es que el intervalo que lo hará funcionar depende totalmente de la CPU y el ancho de banda de la máquina de los usuarios (qué tan rápido puede cargar y representar el nuevo conjunto de mosaicos de imágenes).

Tbh, no estoy seguro de que se pueda hacer para que funcione bien en cada situación, pero un pequeño intervalo entre los niveles de zoom podría ayudar un poco.

Algunas cosas a tener en cuenta aunque:

1. esto pondrá mucho más énfasis en la CPU y el ancho de banda de los usuarios que yendo directamente al nivel de zoom elegido
2. el usuario tendrá que esperar hasta que esto se haga para comenzar a interactuar con el mapa, lo que podría convertirse fácilmente en una experiencia de usuario muy mala.

Esos dos y probablemente otros motivos explican por qué Google no construyó el tipo de zoom que desea en los mapas, en primer lugar, porque es una mala idea ...

Answer 6

Por suerte, quise lograr el mismo efecto recientemente, y encontré una solución, sobre la cual hice una publicación . Básicamente, solo establecer un tiempo de espera para cada transición no es suficiente, ya que podría resultar fácilmente en un tipo de "inicio-parada" si el efecto de zoom de Google aún no ha finalizado o ha terminado hace mucho tiempo.

Como Martin mencionó, hay algunas desventajas en esto, que no voy a reiterar. Si lo utiliza al final es su elección, y depende en gran medida de la potencia de la CPU y / o el navegador de sus usuarios. Sin embargo, es un efecto agradable, y seguro que impresionará a algunos, cuando se usa con prudencia.

Mi solución fue la siguiente:

// example marker:
var marker = new google.maps.Marker({
    map: map, 
    position: new google.maps.LatLng(-20.3,30.3)
});


// add the double-click event listener
google.maps.event.addListener(marker, ''dblclick'', function(event){
    map = marker.getMap();    
    map.setCenter(overlay.getPosition()); // set map center to marker position
    smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
});


// the smooth zoom function
function smoothZoom (map, max, cnt) {
    if (cnt >= max) {
        return;
    }
    else {
        z = google.maps.event.addListener(map, ''zoom_changed'', function(event){
            google.maps.event.removeListener(z);
            smoothZoom(map, max, cnt + 1);
        });
        setTimeout(function(){map.setZoom(cnt)}, 80); // 80ms is what I found to work well on my system -- it might not work well on all systems
    }
}  

Básicamente, lo que se reduce es ajustar el nivel de zoom en uno, escuchar el evento zoom_changed , esperar 80 ms antes de volver a ajustar el nivel de zoom, etc. Lo bueno de esto es que el evento zoom_changed parece llamarse después de que el transición proporcionada por Google Maps, pero antes de que se carguen las imágenes reales, para que no pierda demasiado ancho de banda.

Los 80 ms en el tiempo de espera también son un número mágico que se me ocurrió: sería aconsejable hacer una prueba más exhaustiva y ver qué funciona en diferentes sistemas y navegadores, y quizás cambiar el algoritmo ligeramente en función de sus hallazgos o para diferentes sistemas.

Probablemente tampoco sea necesario agregar y eliminar al oyente cada vez, pero puede hacer esa pequeña mejora usted mismo si así lo desea.