कैसे MapBox जीएल में सभी पॉपअप प्रोग्राम के रूप में बंद करने के लिए?

वोट
5

तो, मैं जानता हूँ कि हम है कि Marker.togglePopup()MapBox जीएल एपीआई में। लेकिन हम सभी पॉपअप प्रोग्राम के रूप में बंद कर सकते हैं?

29/11/2016 को 04:32
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
4

: यहाँ एक उदाहरण है https://jsfiddle.net/kmandov/eozdazdr/
खोलने के लिए / पॉपअप बंद ऊपरी दाएँ भाग में बटन पर क्लिक करें।

यह देखते हुए कि आप एक पॉपअप और एक मार्कर है:

var popup = new mapboxgl.Popup({offset:[0, -30]})
    .setText('Construction on the Washington Monument began in 1848.');

new mapboxgl.Marker(el, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(popup)
    .addTo(map);

आप को फोन करके पॉपअप बंद कर सकते हैं:

popup.remove();

या आप इसे फोन करके खोल सकते हैं:

popup.addTo(map);

आप में देख सकते हैं मार्कर स्रोत , togglePopupइन दोनों तरीकों आंतरिक रूप से उपयोग करता है:

togglePopup() {
    var popup = this._popup;

    if (!popup) return;
    else if (popup.isOpen()) popup.remove();
    else popup.addTo(this._map);
}
29/11/2016 को 06:57
का स्रोत उपयोगकर्ता

वोट
0

स्वीकार किए जाते हैं जवाब (मैं एक मार्कर का उपयोग करके नहीं किया गया था) मेरी उपयोग के मामले पर लागू नहीं होता। मैं MapBox के बिल्ट-इन ईवेंट कार्यप्रवाह का उपयोग करके किसी अन्य समाधान के साथ आने में सक्षम था। उम्मीद है कि इस किसी और मदद करता है।

MapBox आप नक्शे पर घटनाओं को सुनने के लिए अनुमति देता है (और मैन्युअल रूप से उन्हें ट्रिगर)। प्रलेखन यह उल्लेख नहीं है, लेकिन आप कस्टम घटनाओं का उपयोग कर सकते हैं।

यह देखते हुए कि आप एक पॉपअप है:

// Create popup and add it to the map
const popup = new mapboxgl.Popup({ offset: 37, anchor: 'bottom' }).setDOMContent('<h5>Hello</h5>').setLngLat(feature.geometry.coordinates).addTo(map);

// Add a custom event listener to the map
map.on('closeAllPopups', () => {
  popup.remove();
});

आप सभी पॉपअप को बंद करना चाहते हैं, ईवेंट को सक्रिय:

map.fire('closeAllPopups');
21/01/2020 को 21:48
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more