माउस-ओवर पर पॉपअप दिखा रहा है, न कि USC का उपयोग करके क्लिक करें?


37

क्या यह संभव है कि कैटलॉग में माउस-क्लिक पर पॉपअप खुलता है, क्लिक पर नहीं?

यह एक समय में सिर्फ एक मार्कर के लिए काम कर रहा है, लेकिन मुझे बड़ी संख्या में मार्करों के लिए इसकी आवश्यकता है:

marker.on('mouseover', function(e){
    marker.openPopup();
});

1
यदि आपके पास दो प्रश्न हैं, तो कृपया दो थ्रेड्स खोलें, ताकि उन्हें अलग से उत्तर दिया जा सके।
UnderDark

जवाबों:


43

यदि आपको मार्कर के लिए पॉपअप दिखाने की आवश्यकता है तो आप मार्कर bindPopup विधि का उपयोग कर सकते हैं।

तब आपके पास अधिक नियंत्रण होता है और यह स्वचालित रूप से आपके मार्कर से बंध जाएगा।

नीचे दिए गए उदाहरण में आप पॉपअप दिखा सकते हैं जब उपयोगकर्ता समाप्त हो जाता है, और उपयोगकर्ता के बाहर होने पर इसे छिपाते हैं:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

ध्यान दें: आप पॉपअप बंद होने पर पॉपअप के साथ समस्याओं में भाग सकते हैं, जब आप पॉपअप पर माउस ले जाते हैं, तो आपको अपने पॉपअप को मार्कर से दूर थोड़ी दूर दिखाने के लिए पॉपअप एंकर (पॉपअप सेटिंग्स देखें) को समायोजित करने की आवश्यकता हो सकती है, इसलिए ऐसा नहीं होता है। बहुत आसानी से गायब हो जाना।


4
पॉपअप को दृश्यमान रखते जब यह पर मँडरा के लिए समाधान - jsfiddle.net/sowelie/3JbNY
लूटने-गॉर्डन

9

यह मार्कर माउसओवर पर पॉपअप दिखाने में मदद करेगा

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

1
धन्यवाद! इस कोड ने मुझे इस प्रश्न से असंबंधित कुछ में मदद की।
अब्बाफी

6

यह एक पत्रक-विशिष्ट समस्या नहीं है, बल्कि जावास्क्रिप्ट का प्रश्न है।

एक संग्रह में अपने मार्करों को संग्रहीत करें, और फिर उन सभी के लिए openPopupएक 'mouseover'घटना के लिए बाध्य करें।

उदाहरण के लिए, एक सरणी के साथ:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

उत्तर के बजाय एक टिप्पणी में राय: मुझे लगता है कि एक नक्शे पर होवर-ओपन किए गए पॉपअप की प्रयोज्यता, जहां परिभाषा के अनुसार आपका कर्सर बहुत अधिक घूमता है, संदिग्ध है। क्या आप वास्तव में अपने उपयोगकर्ताओं को मार्करों के बीच पाथफाइंडिंग करना चाहते हैं जो वे चाहते हैं, लेकिन अंत में पॉपअप के पीछे छिप जाते हैं, जब भी वे अपने कर्सर को अपने लक्ष्य की ओर ले जाने की कोशिश करते हैं?
मत्तीसगढ़

यह मेरी पसंद नहीं है, दुर्भाग्य से। मेरे पास मार्कर के साथ संग्रहीत नए L.MarkerClusterGroup जैसे MarkerCluster है: var मार्करों = new L.MarkerClusterGroup (); क्या आप उस कोडिंग को इसके लिए काम भी लिखेंगे?
खिलाफ

@againstflow Erm, आपको अपना प्रश्न बदलना चाहिए। आप न केवल होवर पर मार्कर खोलने के लिए कह रहे हैं, आप पूछ रहे हैं कि कैसे एक L.MarkerClusterउदाहरण में मार्करों पर पुनरावृति करें ... मेरा जवाब स्पष्ट रूप से दिखाता है कि कैसे होवर पर पॉपअप के संग्रह को बांधना है। यदि आप जानना चाहते हैं कि क्लस्टर से संग्रह कैसे प्राप्त किया जाए, तो यह कुछ और है।
मैटीजीएसजी

6

अगर आप १.३.x का उपयोग कर रहे हैं, टूलटिप बाइंडिंग एक बिल्ट इन मेथड है।

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

1
बहुत खुबस। ऊपर वर्णित "माउसओवर" / "माउसआउट" घबराहट से पूरी तरह से बचा जाता है।
निक के 9

bindTooltip()अलग-अलग मार्करों पर भी काम करता है।
एस। बग्गी

4

"मार्करों की एक बड़ी संख्या के लिए" काम करने वाले समाधान के संदर्भ में, यह वही है जो मैं जियोजन्स से लोड बिंदु डेटा की प्रत्येक परत के लिए करता हूं:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});

बस जिज्ञासु, किस प्रकार की वस्तु फीचरलेयर है? लगता है यह एक महान समाधान है।
बेहर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.