Google मानचित्र V3

Question

में पॉलीगॉन के शीर्ष पर एक MapLabel लगाकर मैं Google मानचित्र V3 में पॉलीगॉन के शीर्ष पर एक MapLabel लगाने की कोशिश कर रहा हूं। मैंने MapLabel zIndex को 2 और पॉलीगॉन zIndex को बिना किसी किस्मत के सेट करने की कोशिश की है। क्या यह संभव नहीं है क्योंकि बहुभुज वास्तव में zIndex का पालन नहीं करता है?

मैं बाहर की जाँच करने के लिए तुम लोगों के लिए एक jsFiddle बना लिया है: http://jsfiddle.net/7wLWe/1/

समाधान:maplabel.js परिवर्तन में:

mapPane.appendChild(canvas); 

रहे हैं:

floatPane.appendChild(canvas); 

कारण है floatPane सभी मानचित्र परतों से ऊपर है (फलक 6)

http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

Answer 1

यह देखने के लिए बढ़िया है कि आप MapLabel उपयोगिता पुस्तकालय का उपयोग कर रहे हैं!

जैसा कि आपने पाया है, MapLabel एक अलग मानचित्र फलक में बैठता है। zIndex केवल एक निश्चित फलक के भीतर सम्मानित है।

Answer 2

आप maplabel.js को छूने के लिए नहीं करना चाहते हैं, तो आप लेबल के माता पिता की z-index बदलने के लिए (हालांकि यदि आप अन्य canvas तत्वों है, तो आप समारोह को बदलने के लिए आवश्यकता हो सकती है) इस समारोह जोड़ सकते हैं:

//change the z-index of the canvas elements parents to move them above polygon layer 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements 
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support 
    for(var i=0; i<canvasElements.length; i++){ 
     canvasElements[i].parentNode.style.zIndex = 9999; 
    } 

}); 

Answer 3

यह शायद देर हो चुकी है .. लेकिन उम्मीद है कि किसी को यह उपयोगी लगेगा।

आप floatPane (जॉन समाधान) का उपयोग करने के यह हमेशा सब कुछ के शीर्ष पर हो जाएगा, और देने के लिए अनुकूलित zindex .. संपादित करें maplabel.js चाहते हैं नहीं करना चाहते हैं। बस MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) { 
    canvas.parentNode.style.zIndex = style.zIndex; 
} 

अब के अंत से पहले निम्नलिखित पंक्ति जोड़ आप zIndex पारित कर सकते हैं एक maplabel बनाने के दौरान:

var mapLabel = new MapLabel({ 
    text: "abc", 
    position: center, 
    map: map, 
    fontSize: 8, 
    align: 'left', 
    zIndex: 15 
}); 

Answer 4

var maplabel = new MapLabel.... 
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex); 

jQuery ने maplabel.js को बदले बिना मेरे लिए यह बहुत आसान बना दिया। मुझे वैकल्पिक समाधान भी मिला

$(maplabel.getPanes().mapPane).addClass('map-pane'); 

और फिर एक स्टाइलशीट

Answer 5

में z- सूचकांक को परिभाषित मैं इस CodePen example अप खाका खींचा gmaps-labels वर्ग का उपयोग। यह उपरोक्त क्यू में पहेली पर आधारित है और LabelOverlay कक्षा का ओएस जोड़ता है। कक्षा को new google.maps.LatLng, लेबल के बिंदु के चारों ओर केंद्रित बॉक्स के आयाम (लैट्लिंग इकाइयों में) की आवश्यकता होती है (यदि लेबल इस बॉक्स को ओवरफ़्लो करेगा, इसे छुपाएगा, और कुछ CSS। कोड कोड है, कोडपेन में डेमो देखें।

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121, 
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03; 



var overlay1 = new LabelOverlay({ 
    ll  : myLatlng, 

    minBoxH  : MIN_BOX_H, 
    minBoxW  : MIN_BOX_W, 

    maxBoxH  : MAX_BOX_H, 
    maxBoxW  : MAX_BOX_W, 

    ... 

    label  : "I want on top", 
    map  : map 
});