删除带有附加锚标记的`<li>`会留下样式属性</li>

Question

我有一个问题一直阻止我继续前进3天

我有一个附加了锚标记的列表但是当我删除它时，锚标记更改为style:none并且<li>样式仍然存在。

当Marker超出Map Bounds时，我会在Google地图上使用它。我希望删除包含锚标记的整个<li>，但删除的锚标记不是<li>。

这是我的代码。

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function codeAddress() {
    infoBubble = new InfoBubble({
        map: map,
        shadowStyle: 0,
        padding: 10,
        borderRadius: 10,
        arrowSize: 15,
        maxWidth: 300,
        borderWidth: 1,
        borderColor: '#ccc',
        arrowPosition: 50,
        arrowStyle: 0
    });
    $.getJSON('/Dashboard/LoadWorkerList', function Geocode(addresses) {
        $.each(addresses, function () {
            var currVal = this["AddressLine1"];
            var Name = this["Name"];
            var Gender = this["Gender"];
            var Bdate = this["Birthdate"];
            var ID = this["Worker_ID"];
            var Latitude = this["Latitude"];
            var Longitude = this["Longitude"];
            var LatLang = new google.maps.LatLng(Latitude, Longitude);

            var marker = new google.maps.Marker({
                map: map,
                icon: iconBase + 'man.png',
                position: LatLang,
                title: currVal
            })

            var link = $('<a href="#">' + currVal + '</a>')
                 .data('location', LatLang);
            $('#places').append($('<li id=\'List\' class=\'List\'>').append(link));
            link.on('click', function (event) {
                event.preventDefault();
                google.maps.event.trigger(addresses[0], "click");
                infoBubble.removeTab(0);
                infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                infoBubble.open(map, marker);
            });

            google.maps.event.addListener(map, 'idle', function () {
                    $('#places').find('li a').css('display', function () {
                        return (map.getBounds().contains($(this).data('location')))
                  ? ''
                  : 'none';
                    });
                });



            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infoBubble.removeTab(0);
                    infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                    infoBubble.open(map, marker);
                }
            })(marker, currVal));
            addresses.push(marker);

        })
        google.maps.event.trigger(map, 'bounds_changed');
    })
}

当它加载时，看看第二张图片，注意样式仍然是

样式

<style>
    .List
    {
        background-color: #f1f1f1;
        padding: 10px;
        overflow: hidden;
    }
    .List:nth-child(odd)
    {
        background-color: #fcfcfc;
    }
</style>

Answer 1

<强>旧

$('#places li').css('display', function () {
    return (map.getBounds().contains($(this).data('location'))) ? '' : 'none';
});

新

$('#places > li').each(function() {
    var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none';
    $(this).css('display', inside);
});

试试这个