Google은 Zoomout-Pan-Zoomin 애니메이션을지도합니다

StackOverflow https://stackoverflow.com/questions/816100

문제

Google Maps API로 애니메이션을 매끄럽게 확대하는 방법이 궁금합니다.

나는 2 점, 하나는 중국과 프랑스에 1 점을 가지고 있습니다. 내가 중국에서 확대되고 버튼 프랑스를 클릭하면 당시에는 한 번의 줌 레벨을 점차적으로 확대하기를 원합니다. 축소되면 새 위치로 팬을 팬에 넣은 다음 새 위치에서 당시의 줌 레벨을 확대해야합니다.

어떻게 할 수 있습니까?

도움이 되었습니까?

해결책

당신은 필요합니다 zoomOut 연속 줌 매개 변수가 줌을 수행하도록 설정된 메소드 panTo 새로운 센터 포인트에 부드러운 패닝을하는 방법.

당신은 말을들을 수 있습니다 zoomEnd 그리고 moveEnd 맵의 이벤트는 함께 묶을 수 있습니다 zoomOut, panTo 그리고 zoomIn 행동 양식.

편집하다:

그래서이 문제에 대한 샘플을 구현하는 과정에서 나는 doContinuousZoom 파라 켜기 ZoomIn 그리고 ZoomOut (또는 그냥 EnableContinuousZoom 지도에서)는 예상대로 작동하지 않습니다. 타일이 캐시에 있으면 확대 할 때 괜찮습니다 (이것은 중요한 지점입니다. 타일이 캐시되지 않으면 부드러운 애니메이션을 얻을 수는 없습니다). 부드러운 줌 애니메이션을 시뮬레이션하고 각 Zoom 단계에서 ~ 500ms 지연을 도입하여 타일이 ~ 500ms 지연을 도입하여 비동기 적으로 수행 할 수 있습니다 ( panTo, 내 예에서 볼 수있는 Settimeout을 사용하여 Async를 호출합니다).

불행히도 마찬가지는 사실이 아닙니다 zoomIn 각 줌 레벨에 대한 스케일링 애니메이션없이 대상 줌 레벨로 이동하는 방법. Google지도 코드의 버전을 명시 적으로 설정하지 않았으므로 이후 버전에서 수정 된 것일 수 있습니다. 어쨌든 여기에 있습니다 샘플 코드 대부분은 JavaScript 후프 점프이며 Google Maps API와는별로 많지 않습니다.

http://www.cannonade.net/geo.php?test=geo2

이 접근법은 약간 신뢰할 수없는 것처럼 보이기 때문에 Setzoom의 비동기 처리를 명시 적으로 (패닝 물건과 동일) 수행하는 것이 더 합리적이라고 생각합니다.

edit2 :

그래서 나는 지금 명시 적으로 비동기 확대 / 확대를한다 (사용 setTimeout 한 번에 단일 줌으로). 또한 이벤트가 올바르게 체인되도록 각 줌이 발생하면 이벤트를 발사해야합니다. Zoomend와 Panend 이벤트가 동시에 불리는 것처럼 보입니다.

지도에서 enableContinuousZoom 설정은 작동하지 않는 것 같으므로 Zoomout을 호출하는 것이 매개 변수를 Zoomin을 호출하는 것이 유일한 방법 인 것 같습니다.

다른 팁

여기 내 접근 방식이 있습니다.

var point = markers[id].getPosition(); // Get marker position
map.setZoom(9); // Back to default zoom
map.panTo(point); // Pan map to that position
setTimeout("map.setZoom(14)",1000); // Zoom in after 1 sec

var zoomFluid, zoomCoords;   //shared variables

function plotMarker(pos, name){
    var marker = new google.maps.Marker({
        map: map,
        title:name,
        animation: google.maps.Animation.DROP,
        position: pos
    });
    google.maps.event.addListener(marker, 'click', function(){
            zoomCoords = marker.getPosition();     //Updates shared position var
            zoomFluid = map.getZoom();            //Updates shared zoom var;
            map.panTo(zoomCoords);       //initial pan
            zoomTo();                   //recursive call
    });

}

//  increases zoomFluid value at 1/2  second intervals
function zoomTo(){
    //console.log(zoomFluid);
    if(zoomFluid==10) return 0;
    else {
         zoomFluid ++;
         map.setZoom(zoomFluid);
         setTimeout("zoomTo()", 500);
    }
}

축소를 위해이 사람은 나를 위해 잘 작동했습니다.

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);
    }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top