Відображення спливаючого вікна при натисканні миші, а не натисканням кнопки Leaflet

Чи можливо в Leaflet спливаюче вікно відкриватися при переході миші, а не при натисканні?

Це працює лише для одного маркера за один раз, але мені це потрібно для більшої кількості маркерів:

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

Якщо вам потрібно показати спливаюче вікно для маркера, ви можете використовувати маркери bindPopup метод.

Тоді ви маєте більше контролю, і він автоматично буде прив’язаний до вашого маркера.

У наведеному нижче прикладі ви можете показати спливаюче вікно, коли користувач перемикає мишу, і приховати його, коли користувач вимкне миші:

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

Примітка. Ви можете зіткнутися з проблемами із закриттям спливаючих вікон, коли ви клацаєте мишкою на сам спливаюче вікно, тому вам може знадобитися відкоригувати якір для спливаючих вікон (див. Параметри спливаючих вікон), щоб показати спливаючі вікна трохи далі від самого маркера, щоб він не став занадто легко зникають.

Це допоможе показати спливаюче вікно на миші

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

Це не специфічна для Leaflet проблема, а скоріше питання Javascript.

Зберігайте маркери в колекції, а потім прив'язуйте їх openPopupдо 'mouseover'події для всіх.

Наприклад, з масивом:

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

Якщо ви використовуєте Leaflet 1.3.x, прив'язка підказок - це вбудований метод.

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

Що стосується рішення, яке працює "для більшої кількості маркерів", це я роблю для кожного шару точкових даних, завантажених з 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;
    }
});