خرائط جوجل ZoomOut-Pan-zoomIn الرسوم المتحركة
-
03-07-2019 - |
سؤال
أتساءل كيف يمكنني الحصول على تكبير سلس للرسوم المتحركة باستخدام Google Maps API.
لدي نقطتان، واحدة في الصين، وواحدة في فرنسا.عندما أقوم بتكبير الصورة في الصين، وانقر فوق الزر فرنسا.أريد أن يتم التصغير تدريجيًا بشكل سلس، بمستوى تكبير واحد في كل مرة.عندما يتم تصغيره، يجب أن ينتقل إلى الموقع الجديد، ثم يقوم بتكبير الموقع الجديد بمستوى تكبير واحد في كل مرة.
كيف يمكنني أن أفعل هذا؟
المحلول
أنت بحاجة إلى 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 مع المعلمة هو الطريقة الوحيدة لجعل ذلك يعمل.
نصائح أخرى
إليك وجهة نظري.
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);
}
}