Menampilkan sembulan di mouse-over, bukan di klik menggunakan Leaflet?

Apakah mungkin di Leaflet popup terbuka pada mouse-over, bukan pada klik?

Ini berfungsi hanya untuk satu penanda pada satu waktu, tetapi saya membutuhkannya untuk penanda yang lebih banyak:

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

Jika Anda perlu menampilkan popup untuk marker, Anda dapat menggunakan metode marker bindPopup.

Maka Anda memiliki lebih banyak kontrol dan itu akan secara otomatis terikat ke penanda Anda.

Dalam contoh di bawah ini Anda dapat menampilkan sembulan ketika pengguna mouse, dan menyembunyikannya ketika pengguna mouse keluar:

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

Catatan: Anda mungkin mengalami masalah dengan popup yang menutup ketika Anda mengarahkan mouse ke popup itu sendiri, jadi Anda mungkin perlu menyesuaikan jangkar popup dalam (lihat pengaturan popup) untuk menunjukkan popup Anda sedikit lebih jauh dari marker itu sendiri sehingga tidak muncul. menghilang terlalu mudah.

Ini akan membantu untuk menampilkan munculan pada penanda mouseover

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

Ini bukan masalah khusus Leaflet, melainkan pertanyaan tentang Javascript.

Simpan spidol Anda dalam koleksi, lalu ikat openPopupke sebuah 'mouseover'acara untuk semuanya.

Misalnya, dengan sebuah array:

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

Jika Anda menggunakan Leaflet 1.3.x, pengikatan tooltip adalah metode bawaan.

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

Dalam hal memiliki solusi yang berfungsi "untuk sejumlah besar penanda", inilah yang saya lakukan untuk setiap lapisan data titik yang dimuat dari 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;
    }
});