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

37

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

leaflet popup

— melawan arus
sumber

1

Jika Anda memiliki dua pertanyaan, harap buka dua utas sehingga mereka dapat dijawab secara terpisah.

— underdark

43

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.

— Tomislav Muic
sumber

4

Solusi untuk menjaga agar popup tetap terlihat saat melayang di atasnya - jsfiddle.net/sowelie/3JbNY

— rob-gordon

9

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

— Sujeesh Balan
sumber

1

Terima kasih! kode ini membantu saya dalam sesuatu yang tidak terkait dengan pertanyaan ini.

— Abbafei

6

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

— MattiSG
sumber

Opini dalam komentar daripada dalam jawaban: Saya pikir kegunaan popup yang melayang-layang di peta, di mana menurut definisi kursor Anda sering berkeliaran, dipertanyakan. Apakah Anda benar-benar ingin pengguna Anda melakukan pathfinding antara penanda untuk akhirnya mencapai yang mereka inginkan tetapi selalu tersembunyi di balik sembulan setiap kali mereka mencoba untuk memindahkan kursor mereka ke arah target mereka?

— MattiSG

Sayangnya, ini bukan pilihan saya. Saya memiliki marker yang disimpan seperti L.MarkerClusterGroup baru dengan Leaflet MarkerCluster: var marker = new L.MarkerClusterGroup (); apakah pengkodean yang Anda tulis berhasil juga?

— melawan aliran

@ againstflow Erm, Anda harus mengubah pertanyaan Anda, lalu. Anda tidak hanya meminta untuk membuka marker pada hover, Anda juga bertanya bagaimana cara mengulang marker pada L.MarkerClustercontoh ... Jawaban saya jelas menunjukkan bagaimana cara mengikat koleksi popup pada hover. Jika Anda ingin tahu cara mendapatkan koleksi dari sebuah cluster, ini adalah hal lain.

— MattiSG

6

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

— Pengembang yang Terjebak Sepenuhnya
sumber

1

Fantastis. Benar-benar menghindari jitter "mouseover" / "mouseout" yang dijelaskan di atas.

— Nick K9

bindTooltip()bekerja pada spidol individual juga.

— S. Baggy

4

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

— JayCrossler
sumber

Hanya penasaran, jenis objek apa itu featureLayer? Sepertinya ini adalah solusi hebat.

— Behr