jQuery मैड एपीआई वी 3 इन्फोबॉक्स jQuery फीडइन और फीडऑट

Question

का उपयोग करके मैंने वेब को उच्च और निम्न खोजा है और Google मानचित्र में इन्फोबॉक्स/इन्फोविंडो को फीका करने के लिए jQuery का उपयोग करने का एक ट्यूटोरियल या उदाहरण नहीं ढूंढ पाया है, वास्तविक सामग्री सामग्री नहीं /खिड़की। मेरा कोड यहां है, मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं, लेकिन कुछ भी सही नहीं लगता है।

google.maps.event.addListener(marker, 'mouseover', function() { 
    ib.setContent(html); 
    ib.open(map, marker); 
    ib.setValues({type: "point", id: 2}) 

    var idName = marker.get("id"); //I was trying to the id's of the elements here 
    var boxName = ib.get("id"); //to use in my jQuery 

    jQuery(idName).mouseover(function() { 
     jQuery(boxName).fadeIn('slow', function() { 
    // Animation complete 
    }); 
    }); 

}); 

Answer 1

यह वास्तव में इन्फोबॉक्स fadein के लिए संभव है, आप infobox.js में ड्रॉ समारोह को ओवरराइड करने के लिए है फ़ाइल इस

var oldDraw = ib.draw; 
ib.draw = function() { 
    oldDraw.apply(this); 
    jQuery(ib.div_).hide(); 
    jQuery(ib.div_).fadeIn('slow'); 
} 

Answer 2

मुझे नहीं लगता कि यह संभव है क्योंकि Google एनीमेशन विकल्प प्रदान नहीं करता है।

डोम तत्व प्राप्त करने का प्रयास या तो काम नहीं करेगा। आईबी वैरिएबल एक google.maps.InfoWindow क्लास एक डोम तत्व नहीं है। चूंकि जानकारी विंडो के लिए DOM तत्व प्राप्त करने के लिए कोई सार्वजनिक इंटरफ़ेस नहीं है, इसलिए आप इसे स्वयं तक नहीं पहुंच पाएंगे।

यदि आप console.log(ib.get("id")) का उपयोग करते हैं तो आप देखेंगे कि आईडी अपरिभाषित है।

Answer 3

मैं के साथ लेबल (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

गूगल उपयोगिता पुस्तकालय मार्कर का उपयोग कर रहा है जैसे

लेबल पर jquery का उपयोग करना आसान है।

google.maps.event.addListener(marker, "mouseover", function (e) { 
    //console.log(this); this.label.labelDiv_.style.display = 'block'; 
    $(this.label.labelDiv_).fadeIn(); 
}); 

google.maps.event.addListener(marker, "mouseout", function (e) { 
    //this.label.labelDiv_.style.display = 'none'; 
    $(this.label.labelDiv_).fadeOut(); 
}); 

Answer 4

आप ड्रा विधि ओवरराइड और फीका लागू होते हैं, में एनीमेशन खेला जाएगा, भले ही आप चारों ओर खींच सकते हैं या map.If में ज़ूम इन/आउट से आप ऐसा नहीं करना चाहते हैं, तो आप कर सकते थे डोमरेड हैंडलर विधि में fadeIn लागू करें। उस स्थिति में फीका केवल तभी आ जाएगा जब आप infowindow खोला जाता है।

google.maps.event.addListener(ib, 'domready', function() { 
      jQuery(ib).hide().fadeIn('slow'); 
}) 

;

Answer 5

मैंने वेबसाइट के लिए कुछ ऐसा करने की कोशिश की। यहाँ मेरा कोड है। (जीएम-एपीआई-वी 3)

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

function iwFadeIn() { 
    infowindow.open(map, marker); 
    var iw_container = $(".gm-style-iw").parent(); 
    iw_container.stop().hide(); 
    iw_container.fadeIn(1000); 
} 

Answer 6

फीडऑट प्रभाव कक्षा और सेटटाइमआउट जोड़कर हासिल किया जा सकता है। मुझे समझाने दो।

उदाहरण के लिए:

$('.close-el') 
     .on('click', function(e) { 
      e.stopPropagation(); 
      $(infobox.div_).addClass('is-closing'); 
      setTimeout(function() { 
       infobox.close(); 
      }, 700); 
    }); 

जब आप CSS वर्ग (.infoBox आरक्षित है वर्ग) जोड़ने के लिए, और, सीएसएस संक्रमण के अंत के बाद आप की जानकारी बॉक्स को बंद

और सीएसएस (सास)

.infoBox { 
    &.is-closing { 
     transition: transform 400ms, opacity 400ms; 

     transform: translate3d(0, 30px, 0); 
     opacity: 0; 
    } 
}