Pokazuje wyskakujące okienko po najechaniu myszką, a nie po kliknięciu przy pomocy Ulotki?

37

Czy w Ulotce jest możliwe, że wyskakujące okienko otwiera się po najechaniu myszką, a nie kliknięciu?

Działa to tylko dla jednego markera na raz, ale potrzebuję go dla większej liczby markerów:

marker.on('mouseover', function(e){
    marker.openPopup();
});
przeciwprąd
źródło
1
Jeśli masz dwa pytania, otwórz dwa wątki, aby na nie odpowiedzieć osobno.
podmrok

Odpowiedzi:

43

Jeśli chcesz wyświetlić wyskakujące okienko dla markera, możesz użyć metody markerów bindPopup.

Wtedy masz większą kontrolę, a to automatycznie zostanie przypisane do twojego znacznika.

W poniższym przykładzie możesz wyświetlić wyskakujące okienko, gdy użytkownik najedzie myszą, i ukryć je, gdy użytkownik najedzie myszą:

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

Uwaga: możesz napotkać problemy z zamykaniem wyskakujących okienek po najechaniu myszką na samo wyskakujące okienko, więc może być konieczne dostosowanie kotwicy wyskakujących okienek (patrz ustawienia wyskakujących okienek), aby wyświetlać wyskakujące okienka nieco dalej od samego znacznika, aby nie znikają zbyt łatwo.

Tomislav Muic
źródło
4
Rozwiązanie pozwalające zachować wyskakujące okienko widoczne podczas najechania na niego - jsfiddle.net/sowelie/3JbNY
rob-
9

Pomoże to wyświetlić wyskakujące okienko po najechaniu kursorem myszy

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});
Sujeesh Balan
źródło
1
dzięki! ten kod pomógł mi w czymś niezwiązanym z tym pytaniem.
Abbafei,
6

To nie jest problem specyficzny dla Ulotki, ale kwestia Javascript.

Przechowuj swoje znaczniki w kolekcji, a następnie połącz openPopupje z 'mouseover'wydarzeniem dla wszystkich.

Na przykład z tablicą:

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));
}
MattiSG
źródło
Opinia w komentarzu, a nie w odpowiedzi: Myślę, że użyteczność wyskakujących okienek na mapie, gdzie z definicji twój kursor często się kręci, jest wątpliwa. Czy naprawdę chcesz, aby Twoi użytkownicy wyszukiwali ścieżki między markerami, aby w końcu osiągnąć ten, którego chcą, ale zawsze chowają się za wyskakującymi oknami, gdy próbują przesunąć kursor w kierunku celu?
MattiSG,
Niestety nie jest to mój wybór. Mam zapisane markery jak nowy L.MarkerClusterGroup z Leaflet MarkerCluster: var markers = new L.MarkerClusterGroup (); czy kodowanie, które napisałeś, też do tego zadziała?
przeciw przepływowi
@againstflow Erm, powinieneś zmienić swoje pytanie. Nie tylko pytasz o otwieranie znaczników po najechaniu myszką, ale pytasz, jak iterować po markerach w L.MarkerClusterinstancji… Moja odpowiedź wyraźnie pokazuje, jak powiązać zbiór wyskakujących okienek po najechaniu myszą. Jeśli chcesz wiedzieć, jak uzyskać kolekcję z klastra, jest to coś innego.
MattiSG
6

Jeśli używasz Ulotki 1.3.x, wiązanie etykiet jest wbudowaną metodą.

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");
Całkowicie zablokowany programista
źródło
1
Fantastyczny. Całkowicie unika jittera „mouseover” / „mouseout” opisanego powyżej.
Nick K9
bindTooltip()działa również na poszczególnych markerach.
S. Baggy
4

Jeśli chodzi o posiadanie rozwiązania, które działa „dla większej liczby znaczników”, robię to dla każdej warstwy danych punktowych ładowanych z GeoJSON:

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;
    }
});
JayCrossler
źródło
Ciekawe, jaki typ obiektu to featureLayer? Wygląda na to, że to świetne rozwiązanie.
Behr