Fareyle tıklatıldığında pop-up gösteriliyor.


37

Broşürde, açılır pencerenin tıklanmaya değil, farenin üzerine gelmesi mümkün mü?

Bu, bir kerede yalnızca bir işaretleyici için çalışıyor, ancak daha fazla sayıda işaretleyiciye ihtiyacım var:

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

1
İki sorunuz varsa, lütfen iki konu açın, böylece ayrı ayrı cevaplanabilsinler.
underdark

Yanıtlar:


43

Bir işaretçinin açılır penceresini göstermeniz gerekiyorsa, bindPopup yöntemini kullanabilirsiniz.

O zaman daha fazla kontrole sahipsiniz ve otomatik olarak işaretçinize bağlanacaktır.

Aşağıdaki örnekte, kullanıcı hareket ettiğinde açılır pencereyi gösterebilir ve kullanıcı hareket ettiğinde gizleyebilirsiniz:

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

Not: Pop-up'ları farenin biraz uzağında göstermek için pop-up'ın kendisine fare ile tıkladığınızda pop-up'ların kapanmasıyla ilgili sorunlarla karşılaşabilirsiniz. çok kolay kaybolur.



9

Bu, işaretleyici faresinde açılır pencerenin gösterilmesine yardımcı olacaktır.

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

1
Teşekkürler! bu kod, bu soru ile ilgisi olmayan bir konuda bana yardımcı oldu.
Abbafei,

6

Bu, Broşüre özgü bir sorun değil, daha çok bir Javascript sorunudur.

İşaretçilerinizi bir koleksiyonda saklayın ve ardından hepsi openPopupiçin bir 'mouseover'etkinliğe bağlayın.

Örneğin, bir dizi ile:

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

Bir yorumda cevaptan ziyade bir görüş: Sanırım imlecinizin etrafta dolaştığı bir haritada gezinen açılır pencerelerin kullanılabilirliği sorgulanabilir. Gerçekten, kullanıcıların imlecini hedeflerine doğru hareket ettirmeye çalıştıklarında, nihayet istediklerine ulaşmak için belirteçler arasında yol bulmalarını ister misiniz?
MattiSG

Bu benim seçimim değil maalesef. Leaflet MarkerCluster özellikli yeni L.MarkerClusterGroup gibi depolanmış işaretleyicilerim var: var markers = new L.MarkerClusterGroup (); Sana yazdığın kodlama bunun için de işe yarar mı?
akış

@ againstflow Erm, o zaman sorunuzu değiştirmelisiniz. Sadece işaretçilerin üzerinde işaretçileri açmayı değil, bir L.MarkerClusterörnekte işaretçilere nasıl yinelemeyi sorduğunuzu soruyorsunuz … Cevabım vurgulu açılır pencerelerin nasıl bağlanacağını açıkça gösteriyor. Bir kümeden bir koleksiyonun nasıl alınacağını bilmek istiyorsanız, bu başka bir şeydir.
MattiSG


4

"Daha fazla sayıda işaretçi için" işe yarayan bir çözüme sahip olmak açısından, GeoJSON'dan yüklenen her nokta verisi katmanı için yaptığım şey:

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

Merak ediyorum, featureLayer ne tür bir nesnedir? Bu harika bir çözüm gibi görünüyor.
Behr
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.