Google Maps API v3和AJAX - 删除标记

So I'm trying to allow users to click on a button and for a set of markers to come up showing a route (not gotten to polylines yet). I've got that bit working but what I'd like is to get it so that it deletes the previous markers before adding the new ones.

所以我试图让用户点击一个按钮,然后出现一组标记来显示一条路线(还没到达折线)。我有点工作,但我想要的是它在删除之前的标记之前添加新标记。

I've tried a lot of methods but I cannot seem to get any to work for me. I'm not sure if I'm doing it wrong or theres some error in my code I'm not seeing.

我已经尝试了很多方法,但我似乎无法为我工作。我不确定我做错了还是我的代码中的一些错误我没看到。

I've looked here to see if I could find a solution but again, nothing.

我看了看这里是否能找到一个解决方案但是没有。

I'm sure the solution is incredibly simple. Any help would be appreciated.

我确信解决方案非常简单。任何帮助,将不胜感激。

The code:

var route = [];
var markers = [];
var infowindow = new google.maps.InfoWindow();

function initialise(){
    var map = new google.maps.Map(document.getElementById('map-canvas'),{
        center: {lat: 37.7833, lng:-122.4167},
        zoom: 10
    });

    $('.route_button input').click(function() {
        clearMarkers();
        markers = [];
        $.ajax({
            url: 'include/routeinfo_ajax.php',
            type: 'GET',
            dataType: 'xml',
            data: {'route': $(this).attr('name')},
            success: function(response) {
                setMarkerDetails(response);
                for(var i = 0; i<route.length;i++){
                    placeMarkers(map, route[i]);
                }
            },
            error: function(xhr) {
                console.log("error");
            }
        })
    });
}

function placeMarkers(map, route){
    var latLng = new google.maps.LatLng(route[2], route[3]);
    var marker = new google.maps.Marker({
        position:latLng,
        map: map
    });
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function(){
      infowindow.close();
      infowindow.setContent(route[0]);
      infowindow.open(map, this);
    });
}

function clearMarkers() {
    for(var i=0; i<markers.length; i++){
        markers[i].setMap(null);   
    }
    markers = null;//Uncaught TypeError: Cannot read property 'push' of null
    //when changed to markers = []; markers flash as if theyve been removed but both sets of markers are now in place, the previous are not removed

}

function setMarkerDetails(data){
    var stations = data.getElementsByTagName('stations')[0].getElementsByTagName('station');
    for(var i = 0; i<stations.length;i++){
        route.push([
            stations[i].getElementsByTagName('name')[0].innerHTML,
            stations[i].getElementsByTagName('abbr')[0].innerHTML,
            stations[i].getElementsByTagName('lat')[0].innerHTML,
            stations[i].getElementsByTagName('lng')[0].innerHTML,
            stations[i].getElementsByTagName('address')[0].innerHTML,
            stations[i].getElementsByTagName('city')[0].innerHTML,
            stations[i].getElementsByTagName('zipcode')[0].innerHTML
        ]);
    }
}

google.maps.event.addDomListener(window, 'load', initialise);

Thank-you!

Edit: issue persists, and in firefox too so its not a browser issue. (Using chrome)

编辑:问题仍然存在,而在Firefox中也是如此,这不是浏览器问题。 (使用铬)

2 个解决方案

#1

Just remove this line:

只需删除此行:

markers = null;

from your for loop and it should work. Also you don't need to pass the map variable to your function as you are not using it and it is defined in the global scope anyway.

从你的for循环,它应该工作。此外,您不需要将map变量传递给函数,因为您没有使用它,无论如何它都在全局范围中定义。

function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }

    markers = [];
}

#2

As I do, just call initialize() function. This should reset your markers.

像我一样,只需调用initialize()函数。这应该重置您的标记。

#1