div परिवर्तन पर बहुत छोटा jvectormap

Question

मेरे पास दो divs हैं, एक विश्व मानचित्र के साथ और एक यूएस मानचित्र के साथ। जब संयुक्त राज्य अमेरिका को विश्व मानचित्र पर क्लिक किया जाता है तो मैं उस div को छिपाना चाहता हूं और यूएस मानचित्र को देखने में लाता हूं।

यह काम करता है लेकिन नक्शा छोटा है, भले ही ज़ूम बटन की स्थिति इंगित करती है कि div का आकार यह कैसे होना चाहिए।

कोई भी विचार?

यदि मेरे पास दोनों divs शुरुआत से "ब्लॉक" पर सेट हैं, तो वे दोनों सही आकार हैं, यह केवल तब होता है जब div को स्विच करने के लिए कोड का आह्वान होता है।

onRegionClick: function(event, code){ 
         if (code == "US") { openUS('us-map') } 
      }, 

    function openUS(a) { 

    document.getElementById("world-map").style.display = 'none'; 
    document.getElementById(a).style.display = 'block'; 
    } 

Answer 1

यह समस्या इस तथ्य के कारण होती है कि आप छिपे तत्व पर मानचित्र प्रारंभ करते हैं, जिसका आकार उस समय ठीक से गणना नहीं किया जा सकता है। अपने तर्क को बदलने का प्रयास करें ताकि तत्व दिखाई देने के बाद jVectorMap प्रारंभ किया जा सके।

Answer 2

आप इसे दिखाने के बाद उस मानचित्र के कंटेनर पर एक आकार() को ट्रिगर भी कर सकते हैं।

मैं इस पोस्ट में एक उदाहरण बना दिया: Switch maps in Jvectormap?

Answer 3

मैं jVectorMap प्रदर्शन आकार के साथ एक ही समस्या आ रहा था और ठीक से प्रदर्शित करने के लिए उन्हें प्राप्त करने के लिए एक रास्ता मिल गया।

समस्या तब होती है जब आप अपना नक्शा ऑब्जेक्ट बनाते हैं। इसे ठीक से प्रदर्शित करने के लिए, जब आप इसे बनाते हैं तो vectorMap ऑब्जेक्ट दिखाई देनी चाहिए। ऐसा कहा जा रहा है, जब आप उन्हें टैब में डालते हैं, तो आपको:

1. पहले टैब पर क्लिक करें।
2. पहला नक्शा बनाएं।
3. दूसरा टैब क्लिक करें।
4. दूसरा नक्शा बनाएं .. ..
   आप अंततः पहले टैब पर क्लिक कर सकते हैं ताकि यह पेज लोड पर सक्रिय हो।

आशा है कि इससे किसी को भी एक ही समस्या होने में मदद मिलेगी।

Answer 4

आप अपने कोड में तर्क भी जोड़ सकते हैं कि जब आपके मानचित्र का कंटेनर कोड प्रकट होता है तो अद्यतन अद्यतन नामक विधि को निष्पादित करता है। समस्या

$('$world-map').vectorMap('get','mapObject').updateSize(); 

Answer 5

कि अमेरिका नक्शे के साथ div छिपा हुआ है, इसलिए यह नक्शे का आकार (चौड़ाई) सही ढंग से गणना नहीं कर सकते: विशेष रूप से इस तरह दिखता है। इसके बजाय आप ऊंचाई को रखने के लिए उस div को css कर सकते हैं: 0।

मुझे हाइचार्ट्स का उपयोग करके इस समस्या का सामना करना पड़ा, जो jvectormap के लिए समान है। नीचे दिए गए कोड समस्या का समाधान हो (बूटस्ट्रैप का उपयोग कर): - यह कोई मुद्दा जहां नक्शा सही करने के लिए बहुत दूर था, जब तक ब्राउज़र आकार दिया गया था हल

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */