Làm thế nào để làm cho cả hover và click popup hoạt động?

Tôi khá mới cho tất cả những điều này.

Tôi muốn có một di chuột / di chuột VÀ nhấp vào công việc bật lên trên lớp Geojson của tôi. Đây là mã cho đến nay, nhưng tôi không biết nên đưa con trỏ vào đâu mà không làm rối cửa sổ bật lên. Di chuột phải hiển thị nội dung của trường văn bản và tô sáng điểm đánh dấu vòng tròn.

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

Như @ghybs đã nói, hãy đính kèm các sự kiện vào các điểm đánh dấu vòng tròn bên trong pointToLayer, như vậy:

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

Đối với việc hiển thị một số văn bản khi chuột ở trên một hình dạng vectơ (tính năng GeoJSON), bạn sẽ quan tâm đến plugin Leaflet.label ( bản demo ).

Leaflet.label là plugin để thêm nhãn vào điểm đánh dấu & hình dạng trên bản đồ hỗ trợ tờ rơi.

Về việc làm nổi bật / thay đổi kiểu đánh dấu vòng tròn, bạn nên sử dụng "mouseover"và "mouseout"các sự kiện trên từng tính năng của nhóm lớp GeoJSON của bạn, như được hiển thị trong hướng dẫn Tờ rơi đó: Bản đồ Choropleth tương tác, phần "Thêm tương tác" .

hãy làm cho các trạng thái được tô sáng trực quan theo một cách nào đó khi chúng được di chuột bằng chuột.

Tất cả điều này có thể được thực hiện mà không có vấn đề cùng với cửa sổ bật lên được mở khi nhấp.