javascript - 我无法删除上次调用 map 绑定(bind)时创建的标记

Question

我用一些标记加载我的谷歌地图，然后当用户单击日期按钮时我再次加载它并且它工作正常，我的代码如下:

  function maptest(){

 $('#map_canvas').gmap('clear', 'markers');
 demo.add(function () {

     $('#map_canvas').gmap('destroy');
     $('#map_canvas').gmap({ 'zoom': 3, 'disableDefaultUI': true }).bind('init', function (evt, map) {

         var bounds = map.getBounds();
         var mark1 = "hello";
         var mark2 = "bye";
         var temp = mark1;
         var southWest = bounds.getSouthWest();
         var northEast = bounds.getNorthEast();
         var lngSpan = northEast.lng() - southWest.lng();
         var latSpan = northEast.lat() - southWest.lat();
         for (var i = 0; i < 1000; i++) {
             if (i % 2 === 0) {
                 temp = mark2;
             }
             else {
                 temp = mark1;
             }
             var contentString = 'test';
             $(this).gmap('addMarker',
        {'id':'markers', 'position': new google.maps.LatLng(
           southWest.lat() + latSpan * Math.random(),
           southWest.lng() + lngSpan * Math.random()),
            'content': contentString
        }
      ).click(function (i) {
          $('#map_canvas').gmap('openInfoWindow', {
              content: this.content
          }, this);
      });
         }
         $(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
     });
 }).load();

}

现在我的问题是，每次单击调用maptest函数的日期按钮后，之前所做的标记不会消失，并且标记的数量会加倍，但我只想要新调用maptest()的标记功能。谁能指导我我的代码有什么问题导致重复？

根据建议最后更新我的代码:

var markers = [];
var j = 0;
 $(function () {
$("#tt").click(function () {
    clearMarkers1();
    maptest();
});
$('#map_canvas').gmap({ 'zoom': 3, 'disableDefaultUI': true }).bind('init', function (evt, map) {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 3; i++) {
        var $marker = $(this).gmap('addMarker',
                    {
                        'id': i, 'position': new google.maps.LatLng(
                        southWest.lat() + latSpan * Math.random(),
                        southWest.lng() + lngSpan * Math.random()),
                        'content': 'm_' + i
                    }).click(function (i) {
                        $('#map_canvas').gmap('openInfoWindow', {
                            content: this.content
                        }, this);
                    });
        markers.push($marker); // add to the marker array
    }
    j = j + 3;
    $(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
});
});


 function clearMarkers1() {

   for (var i = 0; i < j; i++) {
      alert("clear : "+i);
       if(typeof $('#map_canvas').gmap('get', 'markers')[i]!='undefined' )
         {
           $('#map_canvas').gmap('get', 'markers')[i].setMap(null);
         }

  }

  }
function maptest() 
{
  $('#map_canvas').gmap('destroy');
  $('#map_canvas').gmap({ 'zoom': 3, 'disableDefaultUI': true }).bind('init', function (evt, map) 
 {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = j; i < j + 3; i++) {
        var contentString = 'bgg';
        var $marker = $(this).gmap('addMarker',
                    {
                        'id': i, 'position': new google.maps.LatLng(
                        southWest.lat() + latSpan * Math.random(),
                        southWest.lng() + lngSpan * Math.random()),
                        'content': 'm_' + i
                    }).click(function (i) {
                        $('#map_canvas').gmap('openInfoWindow', {
                            content: this.content
                        }, this);
                    });
        markers.push($marker); // add to the marker array
    }
    j = j + 3;
    $(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
});
}

我的问题是解决我得到的唯一错误是:

    $(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get',   'markers')));

Answer 1

首先删除演示对象方法的使用。 jquery-ui-map 的示例页面使用此对象及其方法来显示演示，但不属于此库的一部分。

每次调用maptest时，作为参数传递给demo.add的函数都会被推送到堆栈上，当您调用demo.load时，所有这些函数都将被推送到堆栈中。已执行。

<小时/>

与具体问题相关:

当您检查 map 时，您会发现之前的标记已成功删除，但每次调用时您都会多获得 3 个标记。

在maptest()中，您首先销毁 map (删除标记)，然后重新初始化 map 并绑定(bind)init-监听器。

但是: init-listener 不绑定(bind)到 map ，它绑定(bind)到 $('#map-canvas') ，并且永远不会被删除，因此每次调用 maptest 时，您都会再添加 1 个 init-listener。

解决方案:使用one()添加监听器，那么监听器执行完后就会被移除:

function maptest(){
  $('#map-canvas')
   .gmap('destroy') //this will remove the markers
    .gmap({'zoom': 2, 'disableDefaultUI':true})
      .one('init', function() {
        var map        = $(this).gmap('get','map'),
            bounds     = map.getBounds(),
            southWest  = bounds.getSouthWest()
            northEast  = bounds.getNorthEast(),
            lngSpan    = northEast.lng() - southWest.lng(),
            latSpan    = northEast.lat() - southWest.lat();

           for ( var i = 0; i < 3; i++ ) {
              var lat = southWest.lat() + latSpan * Math.random()
              lng = southWest.lng() + lngSpan * Math.random();
              $('#map-canvas').gmap('addMarker', {
                           'ID':'m'+i ,
                           'position': new google.maps.LatLng(lat, lng) 
                        }).click(function() {
                            $('#map-canvas')
                             .gmap('openInfoWindow', 
                                   { content : 'Hello world!' }, 
                                   this);
                        });
           }

         $('#map-canvas')
        .gmap('set', 
              'MarkerClusterer', 
              new MarkerClusterer(map, $(this).gmap('get', 'markers')));
     });
 }