Bagaimana cara membuat hover dan klik popup berfungsi?


8

Saya cukup baru dalam hal ini.

Saya ingin memiliki hover / mouseover DAN klik popup bekerja pada lapisan geojson saya. Berikut adalah kode sejauh ini, tapi saya tidak tahu di mana harus memasukkan hover tanpa mengacaukan popup klik. Arahkan harus menunjukkan konten bidang teks dan sorot penanda lingkaran.

$.getJSON('http://soundgoods.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM soundgoods_mixtape_map_1', function(data) {
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#FFCC00",
    color: "#323232",
    weight: 2,
    opacity: 0.5,
    fillOpacity: 0.4
    };

var geojson = L.geoJson(data, {

    pointToLayer: function (feature, latlng) {
        var popupOptions = {maxWidth: 500};
        var popupContent = '<a target="_blank" class="popup" href="' +
                feature.properties.post + '">' +
                feature.properties.soundcloud +
                '<h3>' + "Post & tracklist" + '</h3>' + '</a>';
        return L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions,{

        });

    }

});
markers.addLayer(geojson);

// CONSTRUCT THE MAP
var map = L.map('map').setView([0,0],3);
baseLayer.addTo(map);
markers.addTo(map);

Bisakah Anda jelaskan apa yang Anda inginkan terjadi pada mouseover?
ghybs

Maaf, diedit pertanyaannya. terima kasih sudah memformat.
Wolfram

Jawaban:


5

Seperti yang dikatakan @ghybs, lampirkan acara ke penanda lingkaran di dalamnya pointToLayer, seperti:

pointToLayer: function (feature, latlng) {
    var popupOptions = {maxWidth: 500};
    var popupContent = '<a target="_blank" class="popup" href="' +
            feature.properties.post + '">' +
            feature.properties.soundcloud +
            '<h3>' + "Post & tracklist" + '</h3>' + '</a>';
    var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions);

    // Highlight the marker on hover
    circle.on('mouseover', function(){
        circle.setStyle({ color: 'red' });
    });

    // Un-highlight the marker on hover out
    circle.on('mouseout', function(){
        circle.setStyle(geojsonMarkerOptions);
    });

    // Open the popup on click. Actually optional, as popup automatically adds a click listener.
    circle.bindPopup(popupContent, popupOptions);
    circle.on('click', function(){
        circle.openPopup(latlng);
    });

    return circle;
}

Halo Ivan, terima kasih banyak atas jawabannya, tetapi ketika saya menambahkan kode Anda tidak ada perubahan, tidak ada penyorotan pada mouse ...
Wolfram

1
Kode Ivan harus berfungsi, setelah dikoreksi karena kesalahan kode minor. Versi awal Op: jsfiddle.net/ve2huzxw/202 Dengan kode Ivan: jsfiddle.net/ve2huzxw/203
ghybs

OK, keren, highlighting berfungsi, tetapi bukan popup melayang-layang ... Akan memeriksa solusi di bawah ini. Terima kasih banyak sejauh ini!
Wolfram

@IvanSanchez A +. Pertanyaan: mengapa Anda mengikat dua kali lingkaran? Anda memiliki 2 bindPopup yang hanya dapat Anda gunakan sekali saja?
adhg

@ Adhg Anda benar, saya keliru menulis kode yang memanggil bindPopup()dua kali, dan yang kedua bisa disederhanakan. Untungnya, beberapa panggilan bindPopup()tidak memiliki efek buruk, karena implementasi saat ini akan memperbarui konten popup terikat jika ada popup yang sudah terikat.
IvanSanchez

0

Sedangkan untuk menampilkan beberapa teks ketika mouse berada di atas bentuk vektor (fitur GeoJSON), Anda akan tertarik dengan plugin Leaflet.label ( demo ).

Leaflet.label adalah plugin untuk menambahkan label ke marker & bentuk pada peta yang didukung leaflet.

Mengenai menyoroti / mengubah gaya penanda lingkaran, Anda harus menggunakan "mouseover"dan "mouseout"acara pada setiap fitur grup lapisan GeoJSON Anda, seperti yang ditunjukkan dalam tutorial Leaflet: Peta Choropleth Interaktif, bagian "Menambahkan Interaksi" .

mari kita membuat negara-negara yang disorot secara visual dalam beberapa cara ketika mereka dilayang dengan mouse.

Semua ini dapat dilakukan tanpa masalah bersama dengan popup yang dibuka saat klik.


Terima kasih! Nah, harus melihat bagaimana menginstal plugin dll .... Bahkan jika pengkodean lebih mudah ada kendala lain untuk saya ;-)
Wolfram
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.