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

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

enter image description here

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

Answer 1

我并不完全确定你的代码是如何工作而不会看到整个事情，但我已经修改了一些你必须跟踪数组中添加的标记的内容。

首先，添加一个数组来存储函数外的标记：

var markers = [];

其次，修改稍微添加标记的方式

var $marker = $(this).gmap('addMarker',
{
id: 'm_' + i, '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);
   });
     markers.push($marker); // add to the marker array
   }

我添加了一个函数来清除数组中地图上的标记，然后清除数组

        function clearMarkers(callback) {
            for (var i = 0; i < markers.length; i++) {
                $('#map_canvas').gmap('get', 'markers')['m_' + i].setMap(null);
            }
            markers.length = 0;
            callback();
        }

然后我只需通过回调你现在修改过的maptest（）函数来调用清晰的标记：

                clearMarkers(function () {
                    maptest();
                });

Answer 2

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

每次调用maptest时，作为参数传递给demo.add的函数都会被压入堆栈，当你调用demo.load时，所有这些函数都将被执行。

与具体问题有关：

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

在maptest()中，您首先destroy地图（删除标记的内容），然后重新初始化地图并绑定init - 侦听器。

但是：init - 聆听者没有受到地图限制，它被限制在$('#map-canvas')，并且它永远不会被删除，所以每次调用{{} 1}}你再添加1个maptest - 监听器。

解决方案：使用init添加侦听器，然后在执行时删除侦听器：

one()

我无法摆脱最后一次调用map bind时创建的标记

2 个答案: