我无法摆脱上次调用映射绑定时创建的标记 [英] I can not get rid of the markers that was created in the last call to map bind

查看：75
本文介绍了我无法摆脱上次调用映射绑定时创建的标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<$ p $ （$'$'$ map $'$'$'$ map $'$'$ map $'$。
demo.add（function（）{
$ b $（'＃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（）;
（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（
数学.random（），
southWest.lng（）+ lngSpan * Math.random（）），
'content'：contentString
}
）.click（函数（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（）; 
（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（'op enInfoWindow'，{
 content：this.content 
}，this）; 
}）; 
 markers.push（$ marker）; //添加到标记数组
} 
 j = j + 3; 
 $（this）.gmap（'set'，'MarkerClusterer'，new MarkerClusterer（map，$（this）.gmap（'get'，'markers'）））; 
}）; 
}）; 
 
 
函数clearMarkers1（）{
 
（var i = 0; i< j; i ++）{
 alert（clear： + I）; 
 if（typeof $（'＃map_canvas'）。gmap（'get'，'markers'）[i]！='undefined'）
（$＃b $ b $（'＃map_canvas'）） .gmap（'get'，'markers'）[i] .setMap（null）; 
 
 
 
 
函数maptest（）
 {
 $（'＃map_canvas'）。gmap（ '破坏'）; 
 $（'＃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（）; 
（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'，{
 co ntent：this.content 
}，this）; 
}）; 
 markers.push（$ marker）; //添加到标记数组
} 
 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' ）））;


解决方案

首先删除演示 -object。这个对象及其方法被 jquery-ui-map 的示例页面用于显示演示，并且不是此库的一部分。



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



问题：

当您检查地图时，您会发现以前的标记已成功移除，但在每次调用中，您都会获得更多3个标记。


$ b $ < maptest（）您首先销毁地图（删除标记），然后重新初始化映射并绑定 init -listener。



但是： init -listener不受地图限制，它与 $（'＃map-canvas'）有界，它将永远不会被删除，所以在每次调用 maptest 时，您再添加1个 init -listener。



解决方案：使用 one（）监听器，那么监听器在被执行时会被删除： 

  function maptest（）{
 $（' ＃map-canvas'）
 .gmap（'destroy'）//这将删除标记
 .gmap（{'zoom'：2，'disableDefaultUI'：true}）
。一个（'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点击（函数（）{
 $（'＃map-canvas'）
 .gmap（'openInfoWindow'，
 {content：'Hello世界！'}，
 this）; 
}）; 
 $（'＃map-canvas'）
 .gmap（'set'，$ b $'MarkerClusterer'，
 MarkerClusterer（map， $（this）.gmap（'get'，'markers'）））; 
}）; 
}


I load my google map with some markers and then when user click the date buttom I load it again and it works properly and my code is as follow:

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

}

Now my problem is that after each time that I click date button which invokes maptest function the markers that was made before does not disappear and the number of markers gets doubles but I want just the markers for the new call to maptest() function. Can anyone guide me what is wrong with my code that I get duplication?

Last Update of my code according to suggestions:

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

My problem is solve the only error that I get is this:

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

解决方案

Start by removing the usage of the methods of the demo-object. This object and it's methods are used by the example-pages for jquery-ui-map for displaying the demos and are not a part of this library.

Each time you call maptest the function passed as argument to demo.add will be pushed onto a stack, and when you call demo.load all these functions will be executed.

related to the specific issue:

When you inspect the map you'll recognize that the previous markers have been removed successfully, but on each call you get 3 markers more.

In maptest() you first destroy the map(what removes the markers), and then you re-initialize the map and bind the init-listener.

But: the init-listener isn't bounded to the map, it's bounded to $('#map-canvas') , and it will never be removed, so on each call of maptest you add 1 more init-listener.

Solution: use one() to add the listener, then the listener will be removed when he has been executed:

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

这篇关于我无法摆脱上次调用映射绑定时创建的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆