Google मानचित्र ज़ूमऑट-पैन-ज़ूम इन एनीमेशन

Question

मुझे आश्चर्य है कि मुझे Google मानचित्र API के साथ एनीमेशन में चिकनी ज़ूम कैसे मिलता है।

मेरे पास 2 अंक हैं, एक में, चीन और एक फ्रांस में कहें। जब मैं चीन में ज़ूम करता हूं, और बटन बटन पर क्लिक करता हूं। मैं चाहता हूं कि उस समय चिकनी, एक ज़ूम स्तर धीरे-धीरे ज़ूम करें। जब यह ज़ूम आउट हो जाता है तो उसे नए स्थान पर पैन करना चाहिए, और उसके बाद उस समय एक ज़ूम स्तर पर नए स्थान पर ज़ूम इन करना चाहिए।

मैं यह कैसे कर सकता हूं?

Answer 1

आपको ज़ूम करने के लिए निरंतर ज़ूम पैरामीटर सेट के साथ zoomOut विधि की आवश्यकता है और panTo विधि को नए केंद्र बिंदु पर चिकनी पैनिंग करने के लिए विधि की आवश्यकता है।

आप zoomEnd और moveEnd एक साथ श्रृंखला के लिए नक्शे वस्तु पर घटनाओं अपने zoomOut, panTo और zoomIn तरीकों सुन सकते हैं।

संपादित करें:

तो इस समस्या के लिए एक नमूना को लागू करने के पाठ्यक्रम में, मुझे पता चला कि (मानचित्र पर या सिर्फ EnableContinuousZoom) ZoomIn और ZoomOut पर doContinuousZoom परम काफी काम अपेक्षा के अनुरूप नहीं है। ज़ूम आउट करते समय यह ठीक काम करता है, अगर टाइल्स कैश में हैं (यह एक महत्वपूर्ण बिंदु है, यदि टाइल्स कैश नहीं किए जाते हैं तो आपके बाद की चिकनी एनीमेशन प्राप्त करना वास्तव में संभव नहीं है) तो यह कुछ अच्छा स्केलिंग करता है टाइल एक चिकनी ज़ूम एनीमेशन अनुकरण करने के लिए और प्रत्येक ज़ूम चरण पर ~ 500 एमएस देरी पेश करता है ताकि आप इसे अतुल्यकालिक रूप से कर सकें (panTo के विपरीत, जो आप मेरे उदाहरण में देखेंगे मैं एसिंक को कॉल करने के लिए सेटटाइमआउट का उपयोग करता हूं)।

दुर्भाग्य से zoomIn विधि के लिए यह भी सच नहीं है, जो प्रत्येक ज़ूम स्तर के लिए स्केलिंग एनीमेशन के बिना लक्ष्य ज़ूम स्तर पर कूदता है। मैंने Google मानचित्र कोड के लिए संस्करण को स्पष्ट रूप से सेट करने का प्रयास नहीं किया है, इसलिए यह कुछ ऐसा हो सकता है जो बाद के संस्करणों में तय हो।

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

क्योंकि इस दृष्टिकोण एक सा अविश्वसनीय लगता है, मुझे लगता है कि यह करने के लिए और अधिक समझ बनाने होगा: वैसे भी, यहाँ sample code जो ज्यादातर सिर्फ जावास्क्रिप्ट घेरा कूद और गूगल मैप्स एपीआई के साथ इतना कुछ नहीं है setZoom के लिए async प्रसंस्करण स्पष्ट रूप से (पैनिंग सामान के समान)।

EDIT2:

तो मैं async अब स्पष्ट रूप से जूमिंग करते हैं (एक समय में एक ही ज़ूम के साथ setTimeout का उपयोग)। जब भी प्रत्येक ज़ूम होता है तो मुझे घटनाओं को भी आग लगाना पड़ता है ताकि मेरी घटनाओं का सही ढंग से श्रृंखला हो। ऐसा लगता है कि ज़ूम एंड और पैनएंड घटनाओं को समकालिक रूप से कहा जा रहा है।

मानचित्र पर सक्षम कॉन्टीन्यूज ज़ूम सेट करना प्रतीत नहीं होता है, इसलिए मुझे लगता है कि ज़ूमऑट को कॉल करना, परम के साथ ज़ूम इन काम करने के लिए एकमात्र तरीका है।

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