javascript - 如何从我自己的谷歌地图中删除标记

Question

我正在尝试从我自己的谷歌地图中删除标记，但我的代码不起作用，我也不知道为什么。你愿意帮助我吗？谢谢!

如果我尝试通过 console.log(markers.length) 进行调试，则函数 removeMarkers() - markers.length 中的数据仍然为空

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

function initialize() {

    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(49.8037633, 15.4749126)
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    google.maps.event.addDomListener(document.getElementById('add-markers'), 'click', addMarkers);
    google.maps.event.addDomListener(document.getElementById('remove-markers'), 'click', removeMarkers);
}

function addMarkers() {

    var markerCluster;

    $.ajax({
        type: 'GET',
        url: 'get-places.php',
        dataType: 'json',
        success: function(data) {
            var markers = [];
            $.each(data, function(index, element) {

                var latLng = new google.maps.LatLng(element.lat, element.lng);

                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    // icon: icon,
                    title: element.title
                });
                markers.push(marker);
                var details = element.name;

                bindInfoWindow(marker, map, infowindow, details);

            });
            markerCluster = new MarkerClusterer(map, markers, {
                imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            });
        }
    });
}

function removeMarkers() {

    for (var i = 0; i < markers.length; i++) {

        markers[i].setMap(null);
    }
}


function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(strDescription);
        infowindow.open(map, marker);
    });
}
initialize();

函数 addMarkers() 运行良好，但 removeMarkers() 不行。

Answer 1

您有一个全局变量 var markers = []; 但是当您收到 AJAX 响应时您没有填充它。您在 function addMarkers() 中所做的是填充此函数内部的变量 markers，该变量是此函数的本地变量。

您需要从 function addMarkers() 中删除 var markers = [];，而是使用全局变量从 AJAX 响应中填充标记。然后您将能够在 removeMarkers 函数中删除标记。

var markers = []; // this is global scope

function addMarkers(){
   var markers = [];  // remove this declaration in this function as it creates local scope


}

function removeMarkers(){
   for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
   }
   markers = []; // do not forget to set this empty
}