सवाल Google मानचित्र API v3 प्रत्येक मार्कर को एक InfoWindow जोड़ रहा है


नोट: मैं Google मानचित्र API के v3 का उपयोग कर रहा हूं

मैं मानचित्र पर रखे प्रत्येक मार्कर को एक जानकारी विंडो जोड़ने की कोशिश कर रहा हूं। वर्तमान में मैं निम्नलिखित कोड के साथ ऐसा कर रहा हूं:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        var marker = new google.maps.Marker({map: map, position: point, clickable: true});
        tracks[racer_id].markers[i] = marker;
        var info = new google.maps.InfoWindow({
            content: '<b>Speed:</b> ' + values.inst + ' knots'
        });
        tracks[racer_id].info[i] = info;
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
    }
    track_coordinates.push(point);
    bd.extend(point);
}

समस्या तब होती है जब मैं मार्कर पर क्लिक करता हूं, यह केवल अंतिम मार्कर के लिए जानकारी विंडो प्रदर्शित करता है। यह भी स्पष्ट करने के लिए कि आखिरी मार्कर के बगल में जानकारी विंडो दिखाई देती है, मार्कर पर क्लिक नहीं किया गया है। मुझे लगता है कि मेरी समस्या addListener भाग में है लेकिन पोस्टिव नहीं है। कोई विचार?


44
2017-07-01 14:13


मूल


घटना बंद करें का उपयोग करें ... यह v3 में ऐसा करने का तरीका है: developers.google.com/maps/documentation/javascript/examples/... - David


जवाब:


तुम्हारे पास है एक बहुत आम बंद समस्या में for in पाश:

बंद होने में संलग्न चर एक ही वातावरण को साझा करते हैं, इसलिए उस समय तक click से कॉलबैक addListener कहा जाता है, लूप अपना कोर्स चलाएगा और info चर अंतिम वस्तु को इंगित कर दिया जाएगा, जो अंतिम होता है InfoWindow बनाया था।

इस मामले में, इस समस्या को हल करने का एक आसान तरीका आपके बढ़ने के लिए होगा Marker के साथ वस्तु InfoWindow:

var marker = new google.maps.Marker({map: map, position: point, clickable: true});

marker.info = new google.maps.InfoWindow({
  content: '<b>Speed:</b> ' + values.inst + ' knots'
});

google.maps.event.addListener(marker, 'click', function() {
  marker.info.open(map, marker);
});

यदि आप काम बंद करने के तरीके से परिचित नहीं हैं, तो यह काफी मुश्किल विषय हो सकता है। संक्षिप्त परिचय के लिए आप निम्नलिखित मोज़िला आलेख को देख सकते हैं:

यह भी ध्यान रखें, कि v3 एपीआई एकाधिक की अनुमति देता है InfoWindowमानचित्र पर एस है। यदि आप केवल एक होना चाहते हैं InfoWindow उस समय दिखाई दे रहा है, आपको इसके बजाय एक सिंगल का उपयोग करना चाहिए InfoWindow ऑब्जेक्ट, और उसके बाद इसे खोलें और जब भी मार्कर क्लिक किया जाता है तो इसकी सामग्री बदलें (स्रोत)।


78
2017-07-01 15:17



क्या आप इस कोड स्निपेट में प्लग करने की आवश्यकता के बारे में और बता सकते हैं? क्या यह लूप के लिए या लूप से पहले किया जाता है, मैं थोड़ा उलझन में हूं। - uday
आपको कोड स्निपेट डालना होगा के भीतर लूप के लिए;) - Tilt


आप उपयोग कर सकते हैं this घटना में:

google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map);
    // this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});

34
2018-05-18 07:21



यह सही जवाब होना चाहिए। @DanielVassallo उत्तर से संबंधित एक ही समस्या से पीड़ित है। - Arivan Bastos
यह मेरे लिए भी काम करता था .. 'यह' कुंजी थी। - Richard N
अच्छा काम करता है लेकिन मुझे करना था this.info.open(marker_map, this); - askilondz
@askilondz धन्यवाद, उत्तर अद्यतन करें। - ostapische
उपयोग this.info.open(marker_map,this); यह काम करने के लिए। - Power Engineering


Add_marker में अभी भी एक बंद करने की समस्या है, क्योंकि यह google.maps.event.addListener स्कोप के बाहर मार्कर चर का उपयोग करता है।

एक बेहतर कार्यान्वयन होगा:

function add_marker(racer_id, point, note) {
    var marker = new google.maps.Marker({map: map, position: point, clickable: true});
    marker.note = note;
    google.maps.event.addListener(marker, 'click', function() {
        info_window.content = this.note;
        info_window.open(this.getMap(), this);
    });
    return marker;
}

मैंने मार्कर से मानचित्र का भी उपयोग किया, इस तरह आपको Google मानचित्र ऑब्जेक्ट को पास करने की आवश्यकता नहीं है, शायद आप उस मानचित्र का उपयोग करना चाहते हैं जहां मार्कर किसी भी तरह से संबंधित है।


9
2017-07-27 09:47



वाह! मैं इस पर दो घंटे से अधिक समय तक अटक गया था! पता नहीं था कि दायरे के बाहर मार्कर का उपयोग किया जाएगा! अनेक अनेक धन्यवाद! - Nandita Damaraju


ज़रा सुनिए सभी। मुझे नहीं पता कि यह इष्टतम समाधान है, लेकिन मुझे लगा कि मैं इसे भविष्य में लोगों की मदद करने के लिए यहां पोस्ट करूंगा। अगर आप कुछ भी दिखाना चाहिए तो कृपया टिप्पणी करें।

लूप के लिए मेरा अब है:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        tracks[racer_id].markers[i] = add_marker(racer_id, point, '<b>Speed:</b> ' + values.inst + ' knots<br /><b>Invalid:</b> <input type="button" value="Yes" /> <input type="button" value="No" />');
    }
    track_coordinates.push(point);
    bd.extend(point);
}

तथा add_marker की तरह परिभाषित किया गया है:

var info_window = new google.maps.InfoWindow({content: ''});

function add_marker(racer_id, point, note) {
    var marker = new google.maps.Marker({map: map, position: point, clickable: true});
    marker.note = note;
    google.maps.event.addListener(marker, 'click', function() {
        info_window.content = marker.note;
        info_window.open(map, marker);
    });
    return marker;
}

आप किसी भी समय info_window को बंद करने के लिए info_window.close () का उपयोग कर सकते हैं। उम्मीद है कि यह किसी की मदद करता है।


1
2017-07-01 17:49





पृथ्वी प्लगइन एपीआई के लिए, अपने लूप के बाहर गुब्बारा बनाएं और प्रत्येक काउंटरमार्क के लिए अद्वितीय सामग्री प्राप्त करने के लिए अपने काउंटर को फ़ंक्शन पर पास करें!

function createBalloon(placemark, i, event) {
            var p = placemark;
            var j = i;
            google.earth.addEventListener(p, 'click', function (event) {
                    // prevent the default balloon from popping up
                    event.preventDefault();
                    var balloon = ge.createHtmlStringBalloon('');
                    balloon.setFeature(event.getTarget());

                    balloon.setContentString('iframePath#' + j);

                    ge.setBalloon(balloon);
            });
        }

1
2018-04-05 23:39





मेरे मामले में (जावास्क्रिप्ट insidde रेजर का उपयोग) यह एक Foreach पाश के अंदर पूरी तरह से काम किया

google.maps.event.addListener(marker, 'click', function() {
    marker.info.open(map, this);
});

1
2018-06-29 02:50





इसे इस्तेमाल करे:

for (var i in tracks[racer_id].data.points) {
    values = tracks[racer_id].data.points[i];                
    point = new google.maps.LatLng(values.lat, values.lng);
    if (values.qst) {
        var marker = new google.maps.Marker({map: map, position: point, clickable: true});
        tracks[racer_id].markers[i] = marker;
        var info = new google.maps.InfoWindow({
            content: '<b>Speed:</b> ' + values.inst + ' knots'
        });
        tracks[racer_id].info[i] = info;
        google.maps.event.addListener(tracks[racer_id].markers[i], 'click', function() {
            tracks[racer_id].info[i].open(map, tracks[racer_id].markers[i]);
        });
    }
    track_coordinates.push(point);
    bd.extend(point);
}

0
2017-07-01 14:24



हाहा मैंने पहले ही कोशिश की थी। बस इसे फिर से कोशिश की और दुर्भाग्य से यह अभी भी काम नहीं करता है। - blcArmadillo
यहां समस्या है i चर, जो अभी भी एक बंद में संलग्न है। जब click कॉलबैक कहा जाता है, i परिवर्तनीय लूप के अंतिम आइटम को इंगित कर दिया जाएगा, और इसलिए info[i].open अभी भी अंतिम खुल जाएगा InfoWindow। - Daniel Vassallo


मुझे एक बहुत ही समस्या थी लेकिन एक्शनस्क्रिप्ट 3 में: प्रवाह पर ढेर: गतिशील Google मानचित्र API जानकारी विंडो HTML सामग्री समस्या

मैं डेटाबेस से टूलटिप्स के HTMLcontent में अनन्य जानकारी खींचने की कोशिश कर रहा था और पाया कि मुझे प्रत्येक मार्कर में जोड़े गए अंतिम मार्कर की जानकारी मिल रही थी।

यह मानते हुए कि यह एक एक्शनस्क्रिप्ट विशिष्ट मुद्दा नहीं है तो जोचनजंग का समाधान काम नहीं करेगा। मैंने अपनी समस्या में पोस्ट किए गए समाधान को देखें और देखें कि क्या आप इसे यहां लागू कर सकते हैं। यह मैप एपीआई के साथ एक गंभीर मुद्दा प्रतीत होता है।


0
2017-07-01 14:26