将鼠标移到一个功能以突出显示另一个功能传单

Question

我使用传单创建了一个地图，该传单在鼠标悬停时显示有关状态的信息，然后单击它转到另一个页面。最近，我还需要在地图上贴标签。由于我使用的是GeoJSON功能，因此没有简单的方法可以使用插件添加标签。我已经使用基本地图在地图上放置标签，对于小状态，我使用了一条线路悬停在空白空间上的标签上。我试图绑定一个矩形功能，将标签包含在状态功能中，以使状态突出显示。我已经尝试将坐标放在geojson中的相同特征中，但这会导致标签特征变为颜色，我们希望标签特征保持隐藏。

以下是我的代码的地图部分：

var map = L.map('map', {zoomControl: false}).setView([38.165, -98.613], 4);

/*L.tileLayer('http://{s}.tiles.mapbox.com/v3/wcgislab.k1dm05p3/{z}/{x}/{y}.png', {
    id: 'wcgislab.k1dm05p3'
}).addTo(map);*/

var states = <?php echo json_encode($features);?>;

var imageUrl = 'http://www.link.com/images/map.jpg',
    imageBounds = [[52.5, -128], [20, -129], [20, -52], [53, -51.5]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

function highlightFeature(e) {
    var layer = e.target;
    var feature = e.target.feature;
    if(feature.properties.STATE_TYPE == "Label")
        {

        }
        else
        {
            layer.setStyle({
                weight: 5,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.9
            });

            if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
            }
        }
        info.update(layer.feature.properties);
    }

    function gotofeature(e) {
        var feature = e.target.feature;

        window.location.href = 'http://www.link.com/state.php?State='+feature.properties.State_Abbr;

    }

    function getColor(str){
        switch (str) {
            case 'A': return "#00cc58";
            case 'A+': return "#00cc58";
            case 'A-': return "#00cc58";
            case 'B': return "#a3e300";
            case 'B+': return "#a3e300";
            case 'B-': return "#a3e300";
            case 'C': return "#faa200";
            case 'C+': return "#f2fa00";
            case 'C-': return "#f2fa00";
            case 'D-F': return "#fa2e00";
        }
    }

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: gotofeature
        });
    }

    geojson = L.geoJson(states, {
        style: function(feature) {
            if(feature.properties.STATE_TYPE != "Label")
            {
                switch (feature.properties.data.<?php echo $grade;?>) {
                    case 'A': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'A+': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'A-': return {fillColor: "#00cc58", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'B': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'B+': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'B-': return {fillColor: "#a3e300", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'C': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'C+': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'C-': return {fillColor: "#faa200", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'D': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'D+': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'D-': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'F': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'F+': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                    case 'F-': return {fillColor: "#fa2e00", fillOpacity: .72, weight: 2, opacity: 1, color: 'white', dashArray: '3'};
                }
            }
            else
            {
                return {fillcolor: 'white', fillOpacity: 0, weight: 0, opacity: 0, color: 'white', dashArray: '3'};
            }
        },
        onEachFeature: onEachFeature
    }).addTo(map);

    var legend = L.control({position: 'bottomright'});

    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = ['A', 'B', 'C', 'D-F'],
            labels = ['<i style="background:#00cc58"></i>'];

        // loop through our density intervals and generate a label with a colored square for each interval
        for (var i = 0; i < grades.length; i++) {
            div.innerHTML +=
                '<div class="info_labels"><i style="background:' + getColor(grades[i])+ '"></i> ' +
                grades[i] + '</div>';
        }

        return div;
    };


    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
        this.update();
        return this._div;
    };

    // method that we will use to update the control based on feature properties passed
    info.update = function (props) {
        this._div.innerHTML = '<h4><?php echo $title;?><br>' + (props ?
            "<span>" + props.STATE_NAME + "</span><br><span style='font-size:16px'>" +props.data.<?php echo $subject."Score_Grade";?> +'</span>' 
            : 'Hover over a state');
    };

    info.addTo(map);

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    map.dragging.disable();
    map.touchZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();

    legend.addTo(map);