【问题标题】:Get center coords after drag & pan finished拖动和平移完成后获取中心坐标
【发布时间】:2014-10-21 18:44:11
【问题描述】:

我想跟踪我的地图中心的坐标。到目前为止,我一直在使用这个:

// On Drag End
google.maps.event.addListener(map, 'dragend', function() { 
    $('.map_center_coords .latitude').html( map.getCenter().lat() );
    $('.map_center_coords .longitude').html( map.getCenter().lng() );
});

通过在拖动事件结束时获取坐标来工作。

问题是我现在使用map.panTo 移动到某个位置。

基本上"whenever the center has *finished* moving in any way"有活动吗?

正如 geocodezip 所述,我忘记了 center_changed 事件。但是在拖动/平移地图时会连续触发该事件。

理想情况下,我正在寻找一个在任何拖动/平移完成后只触发一次的事件。

【问题讨论】:

  • 您需要定义“完成”的含义。没有这样的通用事件,需要您自己实现。

标签: google-maps-api-3


【解决方案1】:

改为观察空闲事件(当地图在平移或缩放后变为空闲时触发此事件):

    google.maps.event.addListener(map,'idle',function(){
      if(!this.get('dragging') && this.get('oldCenter') && this.get('oldCenter')!==this.getCenter()) {
        //do what you want to
      }
      if(!this.get('dragging')){
       this.set('oldCenter',this.getCenter())
      }

    });

    google.maps.event.addListener(map,'dragstart',function(){
      this.set('dragging',true);          
    });

    google.maps.event.addListener(map,'dragend',function(){
      this.set('dragging',false);
      google.maps.event.trigger(this,'idle',{});
    });

【讨论】:

    【解决方案2】:

    google.maps.Mapcenter_changed 事件。

    center_changed | None | This event is fired when the map center property changes.
    
    // On center changed
    google.maps.event.addListener(map, 'center_changed', function() { 
      $('.map_center_coords .latitude').html( map.getCenter().lat() );
      $('.map_center_coords .longitude').html( map.getCenter().lng() );
    });
    

    【讨论】:

    • 谢谢我忘记了这个,但实际上它并不是我想要的。当你拖动和平移时,这个会持续触发。理想情况下,我希望只有在拖动/平移完成后才会触发。 (更新问题)
    【解决方案3】:

    尝试使用idle 事件。链接到docs

    当地图在平移或平移后空闲时触发此事件 缩放。

    如果您希望 idle 事件仅在 dragend 之后触发,请尝试下面的 sn-p。

    此代码在dragendidle 事件触发后将坐标打印到控制台。

    mapObj.addListener('dragend', function () {
        var idleListener = mapObj.addListener('idle', function () {
            google.maps.event.removeListener(idleListener);
            console.log(mapObj.getCenter().lat()); 
            console.log(mapObj.getCenter().lng());
        });
    });
    

    【讨论】:

      猜你喜欢
      • 2022-10-17
      • 1970-01-01
      • 2013-05-12
      • 2017-09-05
      • 2018-09-16
      • 2021-08-12
      • 1970-01-01
      • 1970-01-01
      • 2018-02-13
      相关资源
      最近更新 更多