谷歌地图API v3-Ajax(Javascript+Jquery）GET问题

Google Map API v3 - Ajax (Javascript + Jquery) GET issue

本文关键字：GET 问题 Javascript+Jquery API v3-Ajax 谷歌地图更新时间：2023-09-26

我正试图使映射加载标记从xml文件中拉入。它目前完美地做到了这一点。然而，我也希望地图根据从超链接经过的月份重新加载新的标记。

当通过超链接更改"global_month"变量时，ajax请求会触发，并且"data_array"应该根据稍后传递给"if"语句的日期重新填充新数据。但是，它会重用"data_aarray"内容，而不会填充新数据。

我已经尝试通过"change_date_range"函数中的"global_month=[]"重置"global_mounth"，但是，数组似乎没有被重新填充。我花了3个小时试图弄清楚哪里出了问题，但做不到。有人能帮忙吗？还有没有更有效的方法可以做到这一点？

非常感谢您抽出时间！

/////////////////////////////////////////////

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="utf-8">  
                <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                <script>
                    $(document).ready(function()
                    {
                        $.ajax({
                            type: "GET",
                            url: "driving_test_centers.xml",
                            dataType: "xml",
                            success: parseXml
                        });
                    }); 
                    var global_month = 6;
                    function refetch()
                    {
                        $.ajax({
                            type: "GET",
                            url: "driving_test_centers.xml",
                            dataType: "xml",
                            success: parseXml
                        });
                    };          

                var data_array = [];
                var empty_holder;
                var empty_month;
                var info_date;
                var address1;
                var address2;
                var town;
                var county;
                var postcode;
                var lat;
                var lon;
                var male_pass_percentage1;
                var male_pass_percentage;
                var female_pass_percentage1;
                var female_pass_percentage;
                var the_new_date;
                var infowindow;
                var xml_contents;
                function parseXml(xml)
                {
                    $(xml).find("test_center").each(function()    // look for all of the test centers
                    {
                        center_name = $(this).attr('name');
                        address1 = $(this).find('address1').text();
                        address2 = $(this).find('address2').text();
                        town = $(this).find('town').text();
                        county = $(this).find('county').text();
                        postcode = $(this).find('postcode').text();
                        lat = $(this).find('lat').text();
                        lon = $(this).find('lon').text();
                        $(this).find("date_info").each(function()
                        {
                            info_date = $(this).attr('date');
                            empty_month = $(this).find('month').text();
                            male_pass_percentage = $(this).find('male');
                            male_pass_percentage = male_pass_percentage.find('pass_percentage').text();
                            female_pass_percentage = $(this).find('female');
                            female_pass_percentage = female_pass_percentage.find('pass_percentage').text();

                            if(empty_month == global_month){
                                data_array.push([lat,lon,center_name,info_date,male_pass_percentage,female_pass_percentage]);
                            }
                        });

                    });
                }

                function change_date_range(the_new_date){
                    global_month = the_new_date;
                    refetch();
                    init();
                };  


                </script>
                <script>

                function init() {

                    var options = {  
                        zoom: 5,
                        center: new google.maps.LatLng(55.3781, -3.4360),  
                        mapTypeId: google.maps.MapTypeId.ROADMAP  
                    };
                    var places;
                    places = null;  
                    var map = new google.maps.Map(document.getElementById('map'), options);
                    var bounds = new google.maps.LatLngBounds();
                    var places = data_array;
                    var temp_location;

                    for (var i = 0; i < places.length; i++) {
                        temp_location = new google.maps.LatLng(places[i][0], places[i][1])
                        // Adding the markers
                        var marker = new google.maps.Marker({
                            position: temp_location, 
                            map: map,
                            title: places[i][2]
                        });
                        // Wrapping the event listener inside an anonymous function 
                        // that we immediately invoke and passes the variable i to.
                        (function(i, marker) {
                            // Creating the event listener. It now has access to the values of
                            // i and marker as they were during its creation
                            google.maps.event.addListener(marker, 'click', function() {
                                // Check to see if we already have an InfoWindow  
                                if (!infowindow) {
                                    infowindow = new google.maps.InfoWindow();
                                }
                                // Setting the content of the InfoWindow
                                infowindow.setContent(places[i][2] + "<br />" + global_month + "<br />" + places[i][3] + "<br /><br />Male: " + places[i][4] + "%<br />Female: " + places[i][5] + "%");
                                // Tying the InfoWindow to the marker 
                                infowindow.open(map, marker);
                            });
                        })(i, marker);
                        // Extending the bounds object with each LatLng
                        bounds.extend(temp_location);
                    }
                    // Adjusting the map to new bounding box
                    map.fitBounds(bounds)
                };

                </script>
            </head>
            <body onload="init()">
                    <div id="map" style="width:800px;height:600px"></div>
                    <a href="javascript:change_date_range(7)">click</a>
            </body>
            </html>

/////////////////////////////////////////////////////////////

XML文件（的一小部分）：

http://tinypaste.com/198889bb

您没有清除data_array数组。。。您可以继续添加。为什么不将data_array = [];添加到parseXml函数的开头呢

编辑：您还应该清除已经放置的标记。。。一个很好的方法是，当你添加标记时，将它们保存在一个数组中，然后你可以循环通过它，将每个标记的map属性设置为null：

for (x=0;x<markers.length;x++) {markers[x].setMap(null);}