Bagaimana cara membuat hover dan klik popup berfungsi?

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

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

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.