Jak płynnie powiększyć znacznik w Google Maps?

Ten mi ładnie zadziałał:

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

Możesz spróbować użyć setInterval, aby powiększyć jeden poziom na raz i wyczyścić go, gdy osiągniesz pożądany poziom.

Problem polega na tym, że interwał, który sprawi, że będzie działać, jest całkowicie zależny od cpu i przepustowości maszyny użytkowników (jak szybko może załadować i renderować nowy zestaw płytek obrazu).

Tbh, nie jestem pewien, czy da się to zrobić tak, aby działało świetnie w każdej sytuacji, ale mały odstęp między poziomami zoomu może trochę pomóc.

Kilka rzeczy o których warto pamiętać:

To znacznie bardziej obciąży procesor i przepustowość użytkowników niż przejście bezpośrednio do wybranego poziomu zoomlevel]}
1. użytkownik będzie musiał poczekać, aż zostanie to zrobione, aby rozpocząć interakcję z mapą, co może łatwo stać się bardzo złym doświadczeniem dla użytkownika.

Te dwa i prawdopodobnie inne powody są powodem, dla którego google nie zbudowało takiego zoomu, jaki chcesz na mapach - bo to zły pomysł...

@ Herman Schaaf Twoje rozwiązanie jest świetne, ale po dwukrotnym kliknięciu pomija kilka powiększeń :D Więc zrobiłem rozwiązanie + smoothZoom out Nie mogę wziąć całego uznania, że edytowałem kod JesseDobbelaere ' a z jsfiddle.net To mieszanka Twojego i Jesse ' ego.

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

Zrobiłem jeszcze kilka zmiennych, takich jak timeOut i maxZoomIn Out... Pełny kod znajdziesz na jsfiddle http://jsfiddle.net/dexy86/9afy9/

Próbowałem alternatyw podanych powyżej, jednak za każdym razem, gdy widzę Przejście W przeglądarce komputerowej lub aplikacji mobilnej, wszystko następuje natychmiast, lub przynajmniej w okresie czasu, który jest niedostrzegalny dla oka ze względu na czas między każdą iteracją pętli, przynajmniej na sprzęcie, na którym testowałem.

Użyłem tej samej pętli co inne metody, ale zmieniłem timeout tak, że zoom pojawiał się szybciej, gdy poziom zoomu był wyższy, i wolniej, gdy był niższy, więc wyniki były bardziej widoczne.

Zamiast używać stałego timeout period, ustawiam pierwszy timeout na 0, a następnie kolejne timeouty na następujące szybkie i brudne równanie

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

W kodzie założyłem maksymalny zoom jako 18, ale możesz użyć maxZoom , aby dowiedzieć się, jaki jest poziom zoomu dla danej lat/long. Mój kod to:

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

Spowoduje płynne powiększenie żądanej lokalizacji. Spróbuj dodać te linie:

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