Как плавно увеличить маркер в Картах Google?

Question

Я бы хотел плавно увеличивать маркер в Картах Google.Если просто установить масштабирование по двойному щелчку, карта внезапно окажется на этом уровне масштабирования без какого-либо плавного перехода.

При увеличении только на один уровень дальше, чем текущий уровень, Google Maps показывает хороший плавный переход.Таким образом, должно быть возможно плавное увеличение для более чем одного уровня, но как?

Answer 1

По счастливой случайности, я недавно хотел добиться того же эффекта и нашел решение, которое я сделал пост о. По сути, просто установить тайм-аут для каждого перехода недостаточно, потому что это может легко привести к увеличению масштаба «старт-стоп», если эффект масштабирования Google еще не закончен или уже давно завершен.

Как упоминал Мартин, в этом есть некоторые недостатки, которые я не буду повторять. Используете ли вы это в конце концов, ваш выбор, и во многом зависит от мощности процессора вашего пользователя и / или браузера. Тем не менее, это хороший эффект, и, если использовать его с умом, обязательно произойдет впечатление.

Мое решение было следующим:

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

В сущности, все сводится к настройке уровня масштабирования по одному, прослушиванию события zoom_changed, ожиданию 80 мс, а затем повторной настройке уровня масштабирования еще раз и т. Д. Что приятно, так это событие zoom_changed Кажется, он вызывается после плавного перехода, предоставляемого Google Maps, но до фактические изображения загружаются, поэтому он не тратит слишком много пропускной способности.

80 мс в тайм-ауте - это тоже волшебное число, которое я придумал - вам бы посоветовали сделать более тщательный тест и посмотреть, что работает в разных системах и браузерах, и, возможно, немного изменить алгоритм на основе ваших результатов. или для разных систем.

Вероятно, также нет необходимости каждый раз добавлять и удалять слушателя, но вы можете сделать это небольшое улучшение самостоятельно, если хотите.

Answer 2

Этот сработал для меня очень хорошо:

Answer 3

Вы можете попытаться использовать setInterval для увеличения одного уровня за раз и очистить его, когда достигнете желаемого уровня.

Проблема в том, что интервал, который заставит его работать, полностьюзависит от процессора и пропускной способности компьютера пользователя (насколько быстро он может загружать и отображать новый набор плиток с изображениями).

Tbh, я не уверен, что это можно сделать, чтобы он отлично работал вв любой ситуации, но небольшой интервал между уровнями масштабирования может немного помочь.

Несколько вещей, которые следует иметь в виду, но:

1. это значительно увеличит нагрузку на процессор пользователей.и пропускной способности, чем переход непосредственно на выбранный уровень масштабирования
2. , пользователю придется подождать, пока это не будет сделано, чтобы начать взаимодействие с картой, что может легко стать очень плохим опытом пользователя.

Эти две и, вероятно, другие причины, объясняют, почему Google не создавал нужный вам масштаб для карт - потому что это плохая идея ...

Answer 4

@ Герман Шааф Ваше решение отличное, но при двойном щелчке оно пропускает несколько увеличений : D Итак, я сделал решение + smoothZoom out Я не могу взять весь кредит, который я отредактировал код JesseDobbelaere от jsfiddle.net Это смесь твоего кода и кода Джесси.

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

Я сделал еще несколько переменных, таких как timeOut и maxZoomIn Out ... Вы можете найти полный код на jsfiddle http://jsfiddle.net/dexy86/9afy9/

Answer 5

Я испробовал предложенные выше альтернативы, однако всякий раз, когда я просматриваю переход в настольном браузере или мобильном приложении, все это происходит мгновенно или, по крайней мере, в течение периода времени, незаметного для глаз из-завремя между каждой итерацией цикла, по крайней мере на оборудовании, на котором я его опробовал.

Я использовал тот же цикл, что и другие методы, но изменил время ожидания, чтобы увеличение происходило быстрее, когда уровень увеличениявыше и медленнее, когда он был ниже, чтобы результаты были более заметными.

Вместо того, чтобы использовать фиксированный период ожидания, я установил первый тайм-аут на 0, а затем последующие тайм-ауты на следующее быстрое и грязное уравнение

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

В коде я принял максимальное увеличение как18, но вы можете использовать maxZoom , чтобы узнать, каков уровень масштабирования для данного широты / долготы.Мой код:

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

Answer 6

Это будет плавно увеличивать желаемое место.Попробуйте добавить эти строки:

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