एनजी-नक्शा HTML में आंशिक नक्शा

Question

मैं Angular.js में एनजी-नक्शा उपयोग कर रहा हूँ किसी कारण मेरी नक्शा चित्र संपूर्ण नक्शा के 90% के लिए धूसर हो जाता है के लिए, तो तरह से पता चलता बहुत सरल:

:

<style> 
    #map{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 

यहाँ मेरी नियंत्रक है:

<div id="map"> 
<map></map> 
</div> 

मैं भी तो की तरह सीएसएस जोड़ने के लिए कोशिश की है

मैंने ngMap का उपयोग करने के लिए स्क्रिप्ट जोड़ दी हैं। मैंने किसी भी एडब्लॉक को भी हटा दिया है यदि इससे समस्या हो सकती है।

संपादित करें: google.maps.event.trigger (मानचित्र, 'आकार बदलें'); काम करता है

Answer 1

जब आपका नक्शा प्रारंभ किया गया था, तो ऐसा कोई कंटेनर में किया गया था जिसमें कोई आयाम नहीं था (0 चौड़ाई और/या 0 ऊंचाई)। तो नक्शा यह नहीं जानता कि इसे किस आकार की आवश्यकता है।

आप स्पष्ट रूप से अपने नक्शे से पहले अपने तत्व पर चौड़ाई और ऊंचाई आयाम स्थापित करना चाहिए आरंभ नहीं हो जाता, या, कि असफल रहने, कॉल google.maps.event.trigger(map,'resize'); अगर अपने नक्शे एक छिपा तत्व पर प्रारंभ किया गया था (जहां map एक गूगल मानचित्र का एक उदाहरण है) (कोई चौड़ाई/ऊंचाई) जो दिखाई देता है।

नोट: जब तक #map की पेरेंट तत्व एक स्पष्ट ऊंचाई है

#map स्थापना height:100% होने के लिए कोई प्रभाव नहीं है। आगे बढ़ें, #map को height: 300px पर सेट करें और आप इसे अचानक "काम" देखेंगे।

आप नक्शे पूर्ण स्क्रीन होने के लिए चाहते हैं, तो आप html/body तत्वों की ऊंचाई सेट करने के लिए:

html,body,#map { height: 100%; } 

Answer 2

मैं एनजी-नक्शा के स्रोत कोड में देखा गया है, और मैं इस टुकड़े पाया:

/** 
    * if style is not given to the map element, set display and height 
    */ 
    if (getStyle(element[0], 'display') != "block") { 
    element.css('display','block'); 
    } 
    if (getStyle(element[0], 'height').match(/^(0|auto)/)) { 
    element.css('height','300px'); 
    } 

यह ऊंचाई (और संभवतः चौड़ाई) का उपयोग करेगा मानचित्र तत्व में यह विशेषता।

<div id="map"> 
<map style="width:100%;height:100%;"></map> 
</div> 

संपादित करें: तो आपकी समस्या का समाधान Easyest बस चौड़ाई और ऊंचाई के नक्शे पर स्थापित करने के लिए है एनजी-नक्शा सही div की ऊंचाई निर्धारित करने के बाद google.maps.event.trigger(map,'resize'); फोन करेगा, तो तुम नहीं यह करना है।

/** 
    * resize the map to prevent showing partially, in case intialized too early 
    */ 
    $timeout(function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 

Answer 3

यूई-राउटर का उपयोग करके 2 विचारों के बीच नेविगेट करते समय मुझे एक ही समस्या थी (प्रत्येक दृश्य का अपना नक्शा था)।

NgMap.getMap({id: 'myMapId' }).then(function(map) { 
    google.maps.event.trigger(map, 'resize'); 
});