Question

我有一个带有圆圈的谷歌地图，只要我改变半径，我就会提交一个带有新参数的表格，

这适用于editable:true和radius_changed - 事件

因为在完成resize-move时会触发radius_changed事件。

我想对center_changed-event做同样的事情但是当我“掉落”圆圈时它不会发射，它会随着中心的变化而发射，

我无法在文档中找到任何圆圈的拖拽事件，

问题是我的表单会在我将圆圈移动到px时立即提交。

这是我的gmap3代码段

    circle:{
options:{
  center: destination,
  radius : distance,
  fillColor : "white",
  fillOpacity:0.3,
  strokeColor : "#c9311b",
  editable:true,
  draggable:true
},
events:{
  click: function(circle){
    circle.setOptions({
      fillColor : "white",
      fillOpacity:0.1,
      strokeColor : "#FF512F"  
    });
  },
  radius_changed: function(circle){
    var radius =circle.getRadius() ;
    var newradius = parseInt(radius) / 1000;
    alert(parseInt(newradius,10));
    $('#seldistance').val(parseInt(newradius,10));
    $('.sucheen').submit();

  },
  center_changed: function(circle){   //
    var center = circle.getCenter();  // Here´s the center change event,
    console.log(center);              //it really spams the console when you drag
  }                                   //
},
callback: function(circle){
    if(distance != '0'){
        if ( distance < '1000'){
            $(this).gmap3('get').setZoom(15);
            console.log('radius ='+distance);
        }
        else if ( distance < '5000'){
            $(this).gmap3('get').setZoom(13);
            console.log('radius ='+distance);
        }
        else if ( distance < '10000'){
            $(this).gmap3('get').setZoom(12);
            console.log('radius ='+distance);
        }
        else if ( distance < '20000'){
            $(this).gmap3('get').setZoom(11);
            console.log('radius ='+distance);
        }
        else if ( distance < '35000'){
            $(this).gmap3('get').setZoom(10);
            console.log('radius ='+distance);
        }
        else{
        $(this).gmap3('get').setZoom(10);   
        }
    }
    else {
    //Clear circle if no radius is set
    $(this).gmap3({
      clear: {
        name:["circle"],
        last: true
      }
    });
    $(this).gmap3('get').setZoom(12);
    }
}
},//close circle

任何人都知道如何触发dragend事件？=

好吧我意识到我想要的功能带有可编辑功能：true 但只有当我使用小中心点拖动时，我才会喜欢将整个圆圈拖到任何地方提前感谢任何提示

Answer 1

我有同样的问题，我的解决方法就是这个。我知道鼠标是否已关闭 - 在这种情况下，圆心未设置。当鼠标启动时，设置中心。我需要使用超时，因为center_change事件比mouseup事件更快。

由于某种原因，center_changed事件在结束时被触发两次。如果这让你烦恼，可以使用Ben Alman的Throttle / Debounce plugin。

var mousedown;
$(document).mousedown(function() {
    mousedown = true;
});
$(document).mouseup(function() {
    mousedown = false;
});

gmaps.event.addListener(this.circle, 'center_changed', function() {
    setTimeout(function(){
        if (!mousedown) {
            console.log('center changed');
        }
    }, 10);
}

地图叠加圈，谷歌文档中缺少拖动事件

1 个答案: