خرائط جوجل ZoomOut-Pan-zoomIn الرسوم المتحركة

Question

أتساءل كيف يمكنني الحصول على تكبير سلس للرسوم المتحركة باستخدام Google Maps API.

لدي نقطتان، واحدة في الصين، وواحدة في فرنسا.عندما أقوم بتكبير الصورة في الصين، وانقر فوق الزر فرنسا.أريد أن يتم التصغير تدريجيًا بشكل سلس، بمستوى تكبير واحد في كل مرة.عندما يتم تصغيره، يجب أن ينتقل إلى الموقع الجديد، ثم يقوم بتكبير الموقع الجديد بمستوى تكبير واحد في كل مرة.

كيف يمكنني أن أفعل هذا؟

Answer 1

أنت بحاجة إلى zoomOut الطريقة مع تعيين معلمة التكبير المستمر للقيام بالتكبير و panTo طريقة للقيام بالغسل السلس إلى النقطة المركزية الجديدة.

يمكنك الاستماع إلى zoomEnd و moveEnd الأحداث الموجودة على كائن الخريطة لربط ملفك معًا zoomOut, panTo و zoomIn طُرق.

يحرر:

لذلك، أثناء تنفيذ نموذج لهذه المشكلة، اكتشفت أن doContinuousZoom المعلمة على ZoomIn و ZoomOut (أو فقط EnableContinuousZoom على الخريطة) لا يعمل تمامًا كما هو متوقع.إنه يعمل بشكل جيد عند التصغير، إذا كانت المربعات موجودة في ذاكرة التخزين المؤقت (هذه نقطة مهمة، إذا لم يتم تخزين المربعات مؤقتًا، فلن يكون من الممكن حقًا الحصول على الرسوم المتحركة السلسة التي تبحث عنها) ثم يقوم ببعض التحجيم اللطيف المربعات لمحاكاة رسم متحرك سلس للتكبير/التصغير وتقديم تأخير يصل إلى 500 مللي ثانية في كل خطوة تكبير/تصغير حتى تتمكن من القيام بذلك بشكل غير متزامن (على عكس panTo, ، والذي ستراه في مثالي الذي أستخدم فيه setTimeout للاتصال غير المتزامن).

ولسوء الحظ فإن الشيء نفسه ليس صحيحا بالنسبة zoomIn الطريقة، والتي تقفز فقط إلى مستوى التكبير/التصغير المستهدف بدون الرسوم المتحركة للقياس لكل مستوى تكبير/تصغير.لم أحاول تحديد الإصدار بشكل صريح لرمز خرائط Google، لذلك قد يكون هذا شيئًا تم إصلاحه في الإصدارات الأحدث.على أية حال، هنا هو عينة من الرموز وهو في الغالب مجرد قفز جافا سكريبت وليس كثيرًا مع واجهة برمجة تطبيقات خرائط Google:

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

نظرًا لأن هذا الأسلوب يبدو غير موثوق به إلى حد ما، أعتقد أنه سيكون من المنطقي إجراء المعالجة غير المتزامنة لـ setZoom بشكل صريح (مثل عناصر التحريك).

تحرير 2:

لذلك أقوم بالتكبير غير المتزامن بشكل صريح الآن (باستخدام setTimeout مع تكبير واحد في كل مرة).يجب علي أيضًا إطلاق الأحداث عند حدوث كل تكبير حتى تتسلسل الأحداث الخاصة بي بشكل صحيح.يبدو أنه يتم استدعاء الأحداث ZoomEnd وpanEnd بشكل متزامن.

يبدو أن إعداد EnableContiniousZoom على الخريطة لا يعمل، لذا أعتقد أن استدعاء ZoomOut، ZoomIn مع المعلمة هو الطريقة الوحيدة لجعل ذلك يعمل.

Answer 2

إليك وجهة نظري.

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

Answer 3

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

Answer 4

لزوم عمل هذا واحد بالنسبة لي بلطف:

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