Question

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

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

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

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

代码：

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);

感谢 - 你！

编辑：问题仍然存在，而且在Firefox中也是如此，这不是浏览器问题。（使用铬）

Answer 1

只需删除此行：

markers = null;

从你的for循环

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

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

    markers = [];
}

Answer 2

正如我所做，只需拨打initialize()功能即可。这应该重置您的标记。

Google Maps API v3＆amp; AJAX - 删除标记

2 个答案: