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.