删除其中一个项目时,在列表上刷新Css

时间:2014-01-06 02:44:29

标签: javascript jquery html css google-maps

我是谷歌地图的新用户,我创建了一个显示边界标记的列表,但当标记超出范围时,列表中删除的项目的Css或背景仍然保留,列表中的剩余项目具有相同的背景颜色,因为它不刷新。 。

以下是我的地图和列表的图像之前和之后该项目不在边界

Before

After

以下是代码集:

<script type="text/javascript">
        var geocoder, infoBubble;
        var map;
        //var mgr;

        function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(38.50, -90.50),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            // Bounds for North America
            var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(15.70, -160.50),
     new google.maps.LatLng(68.85, -55.90)
   );

            // Listen for the dragend event
            google.maps.event.addListener(map, 'dragend', function () {
                if (strictBounds.contains(map.getCenter())) return;

                // We're out of bounds - Move the map back within the bounds

                var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

                if (x < minX) x = minX;
                if (x > maxX) x = maxX;
                if (y < minY) y = minY;
                if (y > maxY) y = maxY;

                map.setCenter(new google.maps.LatLng(y, x));
            });


            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });



        }
        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(address) {
                $.each(address, function () {
                    var currVal = this["AddressLine1"];
                    var Name = this["Name"];
                    var Gender = this["Gender"];
                    var Bdate = this["Birthdate"];
                    var ID = this["Worker_ID"];
                    geocoder.geocode({ 'address': currVal }, function (results, status) {
                    setTimeout(function() {
                            if (status == google.maps.GeocoderStatus.OK) {
                                var marker = new google.maps.Marker({
                                    map: map,
                                    icon: iconBase + 'man.png',
                                    position: results[0].geometry.location,
                                    title: currVal
                                })


                                var link = $('<a href="#">' + currVal + '</a>')
                         .data('location', results[0].geometry.location);
                                $('#places').append($('<li id=Meow>').append(link));
                                link.on('click', function (event) {
                                    event.preventDefault();
                                    google.maps.event.trigger(address[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));
                                address.push(marker);

                            }
                            else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                            }
                            else {
                                alert("Geocode was not successful for the following reason: " + status);
                            }
                        }, 1000) 
                    });

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

        window.onload = function () {
            initialize();
            codeAddress();
        }
    </script>

提前致谢:)

0 个答案:

没有答案