¿Se muestra la ventana emergente al pasar el mouse, no al hacer clic con el uso de Leaflet?

31

¿Es posible en el Folleto que la ventana emergente se abra al pasar el mouse, no al hacer clic?

Esto funciona solo para un marcador a la vez, pero lo necesito para un mayor número de marcadores:

marker.on('mouseover', function(e){
    marker.openPopup();
});
    
pregunta againstflow 22.08.2012 - 14:09

5 respuestas

35

Si necesita mostrar la ventana emergente para un marcador, puede usar el método bindPopup de los marcadores.

Entonces tienes más control y se vinculará automáticamente a tu marcador.

En el ejemplo a continuación, puede mostrar la ventana emergente cuando el usuario se une y ocultarla cuando el usuario se desconecta:

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

Nota: Es posible que tenga problemas con el cierre de las ventanas emergentes cuando coloca el mouse sobre la ventana emergente, por lo que es posible que deba ajustar el ancla emergente (consulte la configuración de ventanas emergentes) para mostrar las ventanas emergentes un poco más lejos del marcador. no desaparece con demasiada facilidad.

    
respondido por el Tomislav Muic 13.05.2014 - 11:45
6
  

Esto ayudará a mostrar la ventana emergente en el marcador con el mouseover

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});
    
respondido por el Sujeesh Balan 06.11.2013 - 05:45
4

Este no es un problema específico de un folleto, sino más bien una cuestión de Javascript.

Almacena tus marcadores en una colección y luego vincula openPopup a un evento 'mouseover' para todos ellos.

Por ejemplo, con una matriz:

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));
}
    
respondido por el MattiSG 23.08.2012 - 11:32
3

En términos de tener una solución que funcione "para un mayor número de marcadores", esto es lo que hago para cada capa de datos de puntos cargados desde 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;
    }
});
    
respondido por el JayCrossler 22.08.2014 - 19:34
2

Si está utilizando Leaflet 1.3.x, el enlace de información sobre herramientas es un método incorporado.

enlace

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");
    
respondido por el Dan 30.01.2018 - 00:42

Lea otras preguntas en las etiquetas