¿Se muestra una ventana emergente al pasar el mouse por encima, no al hacer clic con el folleto?

37

¿Es posible en el folleto que se abra una ventana emergente al pasar el mouse por encima, 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();
});
contraflujo
fuente
1
Si tiene dos preguntas, abra dos hilos para que puedan responderse por separado.
oscuro

Respuestas:

43

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

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

En el siguiente ejemplo, puede mostrar la ventana emergente cuando el usuario pasa el mouse y ocultarla cuando el usuario se retira:

        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 pasa el mouse sobre la ventana emergente, por lo que es posible que deba ajustar el anclaje de la ventana emergente (consulte la configuración de la ventana emergente) para mostrar sus ventanas emergentes un poco más lejos del marcador en sí, de modo que no desaparecer con demasiada facilidad

Tomislav Muic
fuente
44
Solución para mantener visible la ventana emergente al pasar el mouse sobre ella - jsfiddle.net/sowelie/3JbNY
rob-gordon
9

Esto ayudará a mostrar una ventana emergente en el mouseover marcador

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});
Sujeesh Balan
fuente
1
¡Gracias! Este código me ayudó en algo no relacionado con esta pregunta.
Abbafei
6

Este no es un problema específico del folleto, sino una cuestión de Javascript.

Guarda tus marcadores en una colección y luego únete openPopupa un 'mouseover'evento 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));
}
MattiSG
fuente
Opinión en un comentario en lugar de en la respuesta: creo que la usabilidad de las ventanas emergentes abiertas en un mapa, donde, por definición, su cursor se mueve mucho, es cuestionable. ¿Realmente desea que sus usuarios hagan una búsqueda de ruta entre los marcadores para finalmente lograr el que desean pero siempre se oculta detrás de las ventanas emergentes cada vez que intentan mover el cursor hacia su objetivo?
MattiSG
Esta no es mi elección, desafortunadamente. Tengo marcadores almacenados como nuevo L.MarkerClusterGroup con Leaflet MarkerCluster: var markers = new L.MarkerClusterGroup (); ¿esa codificación que escribiste también funcionaría para eso?
contraflujo
@againstflow Erm, entonces debes cambiar tu pregunta. No solo está pidiendo abrir marcadores al pasar el mouse, sino que se pregunta cómo iterar sobre los marcadores en una L.MarkerClusterinstancia ... Mi respuesta muestra claramente cómo vincular una colección de ventanas emergentes al pasar el mouse. Si desea saber cómo obtener una colección de un clúster, esto es otra cosa.
MattiSG
6

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

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");
Desarrollador completamente atascado
fuente
1
Fantástico. Evita totalmente el jitter "mouseover" / "mouseout" descrito anteriormente.
Nick K9
bindTooltip()también funciona en marcadores individuales.
S. Baggy
4

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;
    }
});
JayCrossler
fuente
Por curiosidad, ¿qué tipo de objeto es featureLayer? Parece que esta es una gran solución.
Behr