जेड-इंडेक्स ओवरले Google मानचित्र संस्करण 3

Question

मैं सभी मार्करों के ऊपर दिखाई देने के लिए Google मानचित्र api v3 में ओवरले प्राप्त करने का प्रयास कर रहा हूं। लेकिन ऐसा लगता है कि गूगल एपीआई हमेशा मेरे ओवरले को सबसे कम जेड-इंडेक्स प्राथमिकता के साथ रखता है। केवल समाधान जो मैंने पाया है वह डीओएम पेड़ के माध्यम से फिर से शुरू करना है और मैन्युअल रूप से जेड-इंडेक्स को उच्च मान पर सेट करना है। गरीब समाधान

मैं के साथ मेरी ओवरले के लिए मेरे लिए एक नया div जोड़ रहा:

onclick : function (e) { 
    var index = $(e.target).index(), 
     lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition()); 
     icon = this.getIcon(), 
     x = lngLatXYposition.x - icon.anchor.x, 
     y = lngLatXYposition.y - icon.anchor.y 

    $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay'); 
} 

मैं हर संपत्ति मैं के बारे में सोच सकता था मेरे ओवरले बनाने के दौरान की कोशिश की है। zindex, zPriority आदि

मैं अपने ओवरले के साथ जोड़ रहा:

$.view.overlay = new GmapOverlay({ map: view.map.gmap }); 

और GmapOverlay नई google.maps.OverlayView से विरासत।

कोई भी विचार?

..fredrik

Answer 1

आप एक OverlayView (यह ऐसी कोई संपत्ति है) की zindex नहीं बदल सकते हैं, लेकिन यह शीशे कि डोम नोड्स शामिल रखती है। यही वह जगह है जहां आप जेड-इंडेक्स संपत्ति का उपयोग कर सकते हैं;

... 
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001; 
... 

Answer 2

ओवरले परत के लिए 104 के लिए z- सूचकांक की स्थापना "जादू" संख्या यदि आप (यानी खींच मार्कर) मार्कर के साथ बातचीत के बारे में परवाह है। किसी भी अधिक 104 होने के लिए "लगता है और आप के साथ बातचीत नहीं कर सकते ।

मैं एक OverlayView जो मार्कर को टूलटिप्स जोड़ना होगा की जरूरत: मार्कर अगर वहाँ एक कम भंगुर समाधान है सोच ...

Answer 3

को भी यही समस्या थी, तो के रूप में मैं था, यहाँ मेरी समस्या और समाधान है , लेकिन मेरे पॉपअप ओवरले मार्कर के पीछे दिखा रहे थे।

मैं गूगल प्रलेखन के अनुसार OverlayView का एक उपवर्ग कार्यान्वित: https://developers.google.com/maps/documentation/javascript/customoverlays

जब आप अपने कस्टम OverlayView.prototype.onAdd समारोह लिखते हैं, आप जो फलक आपके ओवरले संलग्न करने के लिए निर्दिष्ट करने के लिए की जरूरत है। मैंने बस आसपास के स्पष्टीकरण को पढ़ने के बिना कोड कॉपी किया।

उनके कोड में, वे overlayLayer फलक पर ओवरले देते हैं:

var panes = this.getPanes(); 
panes.overlayLayer.appendChild(div); 

लेकिन वहाँ कई अलग अलग MapPanes आप उपयोग कर सकते हैं:

"शीशे के सेट, प्रकार MapPanes की, मानचित्र पर विभिन्न परतों के लिए स्टैकिंग ऑर्डर निर्दिष्ट करें। निम्नलिखित पैन संभव हैं, और उस क्रम में गणना की गई है जिसमें उन्हें नीचे से ऊपर तक रखा गया है: "

• MapPanes.mapPane (स्तर 0)
• MapPanes.overlayLayer (स्तर 1)
• MapPanes.markerLayer (स्तर 2)
• MapPanes।overlayMouseTarget (स्तर 3)
• MapPanes.floatPane (स्तर 4)

मैं ओवरले मानचित्र पर अन्य सभी जानकारी पर होवर करना चाहता था, इसलिए मैं floatPane फलक और समस्या को हल किया करते थे।

तो, बजाय:

this.getPanes().floatPane.appendChild(div); 

Answer 4

उपयोग panes.overlayMouseTarget.appendChild

आप अपने परत के माध्यम से लक्षित करने योग्य होने के लिए अनुमति देना चाहते हैं:

this.getPanes().overlayLayer.appendChild(div) 

आप इस का उपयोग करें माउस क्लिक (और "क्लिक" या सीएसएस छद्म :: होवर जैसी घटनाओं का उपयोग करें) तो आपकोका उपयोग करके मानचित्र पर अपना ओवरले जोड़ना चाहिए

var panes = this.getPanes();

panes.overlayMouseTarget.appendChild (this.div_);

यह भी देखें: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Answer 5

आदेश mapLabel वर्ग के paneType के साथ चारों ओर खेलने के लिए सक्षम होने के लिए, मैं गूगल उपयोगिता पुस्तकालय से MapLabel वर्ग (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303) के लिए एक paneType संपत्ति गयी।

लेबल को पॉलीलाइन द्वारा छिपाने के लिए यह उपयोगी नहीं है।

कृपया नक्शा Label.js फ़ाइल में कोड जोड़ों को पाएं।

MapLabel.prototype.onAdd = function() { 
    var canvas = this.canvas_ = document.createElement('canvas'); 
    var style = canvas.style; 
    style.position = 'absolute'; 

    var ctx = canvas.getContext('2d'); 
    ctx.lineJoin = 'round'; 
    ctx.textBaseline = 'top'; 

    this.drawCanvas_(); 

    var panes = this.getPanes(); 
    if (panes) { 
    // OLD: panes.mapPane.appendChild(canvas) 
    var paneType = this.get('paneType'); 
    panes[paneType].appendChild(canvas); 
    } 
}; 

MapLabel = function (opt_options) { 
    this.set('fontFamily', 'sans-serif'); 
    this.set('fontSize', 12); 
    this.set('fontColor', '#000000'); 
    this.set('strokeWeight', 4); 
    this.set('strokeColor', '#ffffff'); 
    this.set('align', 'center'); 

    this.set('zIndex', 1e3); 
    this.set('paneType', 'floatPane'); 

    this.setValues(opt_options); 
} 

नमूना paneType का उपयोग कर कोड:

var mapLabel = new MapLabel({ 
     text: segDoc.curr_value.toFixed(0), 
     position: new google.maps.LatLng(lblLat, lblLng), 
     map: map.instance, 
     fontSize: 12, 
     align: 'center', 
     zIndex: 10000, 
     paneType: 'floatPane', 
    }); 

धन्यवाद!