Google मानचित्र: पॉलीगॉन और मार्कर जेड-इंडेक्स

Question

मेरे पास कई मार्कर (पीले मंडल) के साथ एक Google मानचित्र है, और मैंने मार्करों पर बहुभुज आकर्षित करने के लिए एक टूल लागू किया। हालांकि, ड्राइंग के दौरान बहुभुज मार्करों के पीछे है (और पूर्ण होने पर पीछे रहता है)।

मैं दोनों मार्करों और बहुभुज में zindex बदल रहा करने की कोशिश की है, लेकिन यह जिस तरह मार्करों अन्य मार्करों के संबंध में दिखाए जाते हैं, और बहुभुज के संबंध में नहीं बदल रहा है। मैंने

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

मैं पॉलीगॉन को सामने कैसे ला सकता हूं?

Answer 1

यह समस्या का समाधान नहीं करेगा, लेकिन यह समझाएगा कि आपने जो चीजों की कोशिश की वह काम नहीं कर रहा था।

मैप्स एपीआई कई एक निश्चित Z क्रम में MapPanes रूप में जाना जाता परतों का उपयोग करता है:

• 4: floatPane (infowindow)
• 3: overlayMouseTarget (माउस घटनाओं)
• 2: markerLayer (मार्कर छवियों)
• 1: overlayLayer (बहुभुज, पोलीलाइंस, जमीन ओवरले, टाइल परत ओवरले)
• 0: mapPane (मानचित्र टाइल ऊपर सबसे कम फलक)

तो परत 2 में मार्कर छवियां हमेशा परत 1 में बहुभुज से ऊपर होती हैं। जब आप मार्कर पर जेड-इंडेक्स के साथ परेशान होते हैं, तो आप उन्हें एक दूसरे के सापेक्ष समायोजित कर रहे हैं। यह कोई अच्छा नहीं करता है, क्योंकि वे सभी बहुभुज के ऊपर एक परत में हैं।

आप इसके बारे में क्या कर सकते हैं? एकमात्र समाधान जो मैं सोच सकता हूं वह है कि बहुभुज या मार्करों के लिए अपना खुद का OverlayView बनाएं ताकि आप उन्हें इच्छित मानचित्रपैन में रख सकें।

क्या आपके मार्कर क्लिक करने योग्य हैं, या वे केवल स्थिर छवियां हैं? यदि वे क्लिक करने योग्य नहीं हैं, तो आप संभवतः mapPane में स्वयं को चित्रित करने से दूर हो सकते हैं। तब आपके बहुभुज उनके ऊपर होंगे। या इसके विपरीत: आप बहुभुज को उच्च परतों में से एक में खींच सकते हैं, शायद floatShadow में।

समस्या तब आपको canvas तत्व या डीओएम छवियों के साथ, अपने सभी ड्राइंग करना है। और यदि आप क्लिक करने योग्य हैं तो भी आपका स्वयं का माउस परीक्षण परीक्षण करता है।

वहाँ अच्छा OverlayView उदाहरण के एक बहुत वहाँ बाहर नहीं हैं, लेकिन मैं अपने ही में से एक में उल्लेख करेंगे: एक छोटे पुस्तकालय मैंने कुछ समय पहले PolyGonzo, polygonzo.js फ़ाइल OverlayView कार्यान्वयन है जहां कहा जाता है लिखा था। कोड बहुत अच्छा नहीं है - मैंने इसे बहुत जल्दी में एक साथ फेंक दिया - लेकिन यह आपको कुछ विचार देने में मदद कर सकता है।इस विधि कॉल

Answer 2

बदलें:

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1); 

इस के लिए

:

polygon.setZIndex(4); 

Answer 3

मैं जानता हूँ कि इस सवाल पुराना है लेकिन भविष्य उपयोगकर्ताओं के लिए मैं अपने दृष्टिकोण को साझा करना चाहते हैं: उच्च zIndex साथ

आकृतियाँ कम मूल्य वाले लोगों के सामने प्रदर्शित मूल्य। इस उदाहरण के लिए मैं बहुभुज का उपयोग कर रहा है, लेकिन अन्य आकार के लिए इसी तरह की है:

var globalZIndex = 1; //Be sure you can access anywhere 
//... Other instructions for creating map, polygon and any else 
polygon.setOptions({ zIndex: globalZIndex++ }); 

सूचना मार्कर एक विधि setZIndex(zIndex:number) है।

Answer 4

मुझे एक के लिए

हैलो प्रतीक

var lineSymbol = { 
       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
       strokeColor: '#181727', 
       fillColor: '#50040B', 

      }; 

      var dashedSymbol = { 
       path: 'M 0,-1 0,1', 
       strokeOpacity: 1, 
       scale: 4 

      }; 

[![function MakeMarker(pinColor){ 
       var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
         new google.maps.Size(21, 34), 
         new google.maps.Point(0,0), 
         new google.maps.Point(10, 34)); 

       return pinImage; 

      }][1]][1] 

FlowMarkersdashed(new google.maps.LatLng(positionorigin[0], positionorigin[1]), 
           new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxphysique'][j]['colorFlux'], dashedSymbol, j); 

      function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){ 

       var flightPlanCoordinates = [ 
        latlngOrgin, 
        {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()}, 
//     {lat: -18.142, lng: 178.431}, 
        latlngDest, 
       ]; 
       var line = new google.maps.Polyline({ 
        path: flightPlanCoordinates, 
        strokeOpacity: 0, 
        icons: [{ 
         icon: Symbol, 
//      offset: '100%', 
         offset: '0', 
         repeat: '20px' 

//     repeat: '20px' 
        }], 
        strokeColor: "#"+ColorFlow, 
        geodesic: true, 

//     editable: true, 

        map: map 
       }); 
      } 

बनाएँ के लिए और के लिए इस समाधान

पाया एक फ्लो मार्कर सरल

FlowMarkers(new google.maps.LatLng(positionorigin[0], positionorigin[1]), 
           new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxinformation'][j]['colorFlux'], lineSymbol,j); 


function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){ 

       var flightPlanCoordinates = [ 
        latlngOrgin, 
        {lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()}, 
//     {lat: -18.142, lng: 178.431}, 
        latlngDest, 
       ]; 
       var line = new google.maps.Polyline({ 
        path: flightPlanCoordinates, 
        strokeOpacity: 0, 
        icons: [{ 
         icon: Symbol, 
//      offset: '100%', 
         offset: '0', 
         repeat: '20px' 

//     repeat: '20px' 
        }], 
        strokeColor: "#"+ColorFlow, 
        geodesic: true, 

//     editable: true, 

        map: map 
       }); 
      } 

और अंत में यह मेरा परिणाम

है