Google मानचित्र एपीआई v3 टूल्स: दृश्य विकृतियां?

मैंने अभी देखा है कि जीएपी व्यू टूल्स प्रदर्शित कर रहे हैं ... बल्कि असामान्य रूप से। उनके क्षेत्रों को अभी भी ठीक तरह से परिभाषित किया जा रहा है- मैं उनके साथ ठीक से बातचीत कर सकता हूं, यह सिर्फ उनकी उपस्थिति है जो गड़बड़ लगती है।Google मानचित्र एपीआई v3 टूल्स: दृश्य विकृतियां?

मैंने किसी भी सीएसएस को मानचित्र के टुकड़ों में लागू नहीं किया है, और मैप कंटेनर पर लागू एकमात्र सीएसएस width:100%; height:100%; z-index:0; है (जो मैं आमतौर पर करता हूं)।

मैं पृष्ठ position:absolute; और position:fixed; और कुछ उच्च z-index रों (500 & 1000) है पर अन्य तत्वों की क्या ज़रूरत है। क्या यह संभव है कि वे मानचित्र के औजारों के दृश्य विकृति का कारण बन रहे हों?

मुझे क्रोम, क्रोम कैनरी, एफएफएक्स, सफारी और ओपेरा (मैक ओएसएक्स पर) के नवीनतम संस्करणों में एक ही अजीब दृश्य विरूपण दिखाई देता है।

मैंने देव उपकरण/फायरबग की जांच की, और मानचित्र के कंटेनर पर या सीधे इसके टूल्स पर कोई अप्रत्याशित सीएसएस लागू नहीं किया जा रहा है।

<html style="width:100%;height:100%;"> 
    <head> 
     <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css"> 
     <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css"> 
     <script 
      type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=..."> 
     </script> 
     <script type="text/javascript"> 
      function ginit() { 
       var vancouver = new google.maps.LatLng(49.285415,-123.114982); 
       var mapOptions = { 
        center: vancouver, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(
        document.getElementById("map"), 
        mapOptions 
       ); 
       var infowindow = new google.maps.InfoWindow(), 
        marker; 
      }//ginit() 
     </script> 
    </head> 
    <body onload="ginit();" style="width:100%;height:100%;"> 
     <div id="map" style="width:100%;height:100%;"></div> 
    </body> 
</html>

संपादित:

Google Maps Api v3: Map interface tools

यहाँ सटीक HTML है (मैं अन्य तत्वों और सीएसएस और weirdness अभी भी होता है बाहर छीन) ऐसा लगता है इस मुद्दे से आ रही है फाउंडेशन और बूटस्ट्रैप का संयोजन: किसी को हटाने से समस्या ठीक हो जाती है। इसके अलावा इससे कोई फर्क नहीं पड़ता कि पृष्ठ संदर्भ वर्गों पर libs से कोई तत्व नहीं है, यह विकृति का कारण बनता है।

मैंने इसे एक पहेली में डालने की कोशिश की, लेकिन मुझे लोड करने के लिए jsfiddle.net नहीं मिला।

स्रोत

2012-12-19 jacob

बस यह नई परियोजना? सभी परियोजनाएं? एक कंप्यूटर पर? सभी कंप्यूटर? क्या हम एक डेमो देख सकते हैं? अन्यथा यहां करने के लिए बहुत कुछ नहीं है। – Sparky

मैं इस समय केवल एक परियोजना पर काम कर रहा हूं। और मैंने इसे 2 कंप्यूटरों पर परीक्षण किया है: ओएसएक्स 10.6 और 10.8। मैं एक बेवकूफ नीचे झुकाव पर काम कर रहा हूं (वहां बहुत सारी ढांचे की चीजें हो रही हैं जिन्हें मुझे बाहर करना है), लेकिन मुझे jsfiddle.net तक पहुंचने में परेशानी हो रही है। – jacob

हाँ, किसी कारण से jsFiddle अभी बहुत धीमा है। आप डेमो बनाकर सही काम कर रहे हैं, लेकिन यही कारण है कि सवाल कोड को दिखाने के लिए jsFiddle पर _solely_ पर भरोसा नहीं करना चाहिए। – Sparky

भविष्य में ऐसे उपयोगकर्ताओं के लिए जो एक ही समस्या का सामना करते हैं, यहां ठीक है।

#map img{max-width: inherit;}

अन्य उत्तरों की तरह यह कहा गया कि यह अधिकतम चौड़ाई के साथ समस्या है।

स्रोत

2013-01-13 18:50:03

'# मैप आईएमजी {अधिकतम चौड़ाई: विरासत! महत्वपूर्ण; अधिकतम ऊंचाई: विरासत! महत्वपूर्ण} ' –

बूटस्ट्रैप और फाउंडेशन Google मानचित्र कैनवस के लिए { img max-width:100% } सेट करें। इससे नक्शा नियंत्रण विकृत दिखाई देने का कारण बनता है। सीएसएस को max-width:none; में बदलें। [source]

चेतावनी: जाहिर है img { max-width: 100% … } छवियों उत्तरदायी लेआउट के लिए ऑटो का आकार बदलता है के लिए अभिन्न अंग है, इसलिए सावधानी से उपयोग करें। [source]

स्रोत

2012-12-20 00:48:35 jacob

हाँ, # नक्शे-कैनवास img { अधिकतम-चौड़ाई : कोई नहीं; } मेरे लिए यह तय किया गया। –

फाउंडेशन 5 न केवल जीएमएपी तोड़ता है, यह MapQuest भी तोड़ता है। सौभाग्य से दोनों Goomap & क्वेस्ट में कक्षाएं हैं जो हमें केवल मानचित्र प्रदर्शन के लिए F5 व्यवहार को अधिभारित करने की अनुमति देती हैं।

.google-map { 
    height: 400px; // no default height 
    color: #191970; // default color for both text and background is white !!! 
} 

.quest-map { 
    height:400px; 
    color: #191970; 
} 

// Fix Foundation bug with MapQuest 
.mqa-display { 
    img {max-width: none;} 
    label { width: auto; display: inline; } 
} 

// Fix Foundation bug with GoogleMap 
.gm-style { 
    img { max-width: none; } 
    label { width: auto; display: inline; } 
}

स्रोत

2015-02-18 14:36:44 Fulup

Google मानचित्र एपीआई v3 टूल्स: दृश्य विकृतियां?

उत्तर

संबंधित मुद्दे