गूगल मैप्स एपीआई v3 प्रत्येक मार्कर

Question

नोट करने के लिए एक InfoWindow जोड़ने: मैं गूगल मैप्स एपीआई

मैं प्रत्येक मार्कर मैं नक्शे पर डाल करने के लिए एक जानकारी विंडो को जोड़ने के लिए कोशिश कर रहा हूँ की 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 भाग में है लेकिन पोस्टिव नहीं है। कोई विचार?

Answer 1

आप for in पाश में a very common closure problem कर रहे हैं:

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

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

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); 
}); 

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

• Working with Closures

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

Answer 2

इस प्रयास करें:

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); 
} 

Answer 3

मैं एक बहुत ही इसी तरह की समस्या थी लेकिन ActionScript 3 में: Stack Over Flow: Dynamic Google Maps API Info Window HTML Content Issue

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

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

Answer 4

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

छोरों के लिए मेरा अब है:

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.close() किसी भी समय info_window बंद करने के लिए उपयोग कर सकते हैं: के रूप में

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 परिभाषित किया गया है। उम्मीद है कि यह किसी की मदद करता है।

Answer 5

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; 
} 

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

Answer 6

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

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); 
      }); 
     } 

Answer 7

आप घटना में 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. 
}); 

Answer 8

एक ही रास्ता मैं अंत में काम करने के लिए इस मिल सकता है जावास्क्रिप्ट में एक सरणी बनाने के द्वारा किया गया था। सरणी तत्व विभिन्न जानकारी-विंडो का संदर्भ देते हैं (मानचित्र पर प्रत्येक मार्कर के लिए एक जानकारी-विंडो बनाई गई है)। प्रत्येक सरणी तत्व में इसके उपयुक्त मानचित्र मार्कर के लिए अद्वितीय पाठ होता है। मैंने सरणी तत्व के आधार पर प्रत्येक जानकारी-विंडो के लिए जावास्क्रिप्ट ईवेंट को परिभाषित किया। और जब ईवेंट आग लगती है, तो मैं प्रदर्शित करने के लिए उपयुक्त मान को संदर्भित करने के लिए सरणी तत्व का संदर्भ देने के लिए "यह" कीवर्ड का उपयोग करता हूं।

var map = new google.maps.Map(document.getElementById('map-div'), mapOptions); 
zipcircle = []; 
for (var zip in zipmap) { 
    var circleoptions = { 
     strokeOpacity: 0.8, 
     strokeWeight: 1, 
     fillOpacity: 0.35, 
     map: map, 
     center: zipmap[zip].center, 
     radius: 100 
    }; 
    zipcircle[zipmap[zip].zipkey] = new google.maps.Circle(circleoptions); 
    zipcircle[zipmap[zip].zipkey].infowindowtext = zipmap[zip].popuptext; 
    zipcircle[zipmap[zip].zipkey].infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(zipcircle[zipmap[zip].zipkey], 'click', function() { 
     this.infowindow.setContent(this.infowindowtext); 
     this.infowindow.open(map, this); 
    }); 
} 

Answer 9

उपयोग घटना को बंद ...

यह कैसे v3 में यह करने के लिए है: https://developers.google.com/maps/documentation/javascript/examples/event-closure

Answer 10

मैं एक ऐसी ही समस्या थी। यदि आप चाहते हैं कि कुछ जानकारी के लिए मार्कर पर होवर किया जाए, तो इसे क्लिक करने के बजाय, मुझे पता चला कि जानकारी विंडो का उपयोग करने का एक अच्छा विकल्प मार्कर पर एक शीर्षक सेट करना था। इस तरह जब भी आप मार्कर पर माउस को घुमाते हैं तो शीर्षक एएलटी टैग की तरह प्रदर्शित होता है। 'marker.setTitle (' मार्कर '+ आईडी);' यह बहुत

Answer 11

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

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