【问题标题】:Dragging Pegman in Maps V3 triggers unwanted click event在 Maps V3 中拖动街景小人会触发不需要的点击事件
【发布时间】:2014-10-25 11:27:55
【问题描述】:

我在带有链接街景的 V3 地图上有两个事件处理程序。 (使用 map.setStreetView(panorama); 链接)一种是检测地图上的单击,在这种情况下,我更新 HTML 字段以显示该点的纬度/经度。另一个是检测正在更改的全景图的位置 (position_changed),以便我可以更新 HTML 字段以显示全景图的纬度/经度。

问题是当我通过拖动街景小人来改变全景图时,当我释放鼠标按钮时会触发点击事件。因此,HTML 中的两组字段都发生了变化,而不仅仅是全景位置。

我试图通过在单击事件发生时测试当前和以前的全景位置来阻止它,但似乎全景位置更改事件在单击事件之前触发,这意味着全景的以前和当前位置都已经设置到新位置。

我尝试将单击事件更改为双击,但这也会导致地图放大,这是我不想要的。

我基本上想要的是如果单击事件是由街景小人被拖动或某种方式检测到他只是被拖动引起的,则不会触发它。我想一种方法是将最后一次全景更改的时间存储在 position_change 事件中,然后检查触发点击事件的时间,但这似乎有点 hacky。

这是我的两个事件的代码:

 google.maps.event.addListener(map, 'click', function (e) {    
    document.getElementById('mappos').innerHTML = e.latLng.lat().toFixed(6) + "," + e.latLng.lng().toFixed(6);    
 });

  google.maps.event.addListener(panorama, 'position_changed', function() {
      streetvpos = panorama.getPosition();
      document.getElementById('svpos').innerHTML = streetvpos.lat().toFixed(6) + "," + streetvpos.lng().toFixed(6);
  });

fiddle

为了其他人的利益,我想出了一个可行的解决方案。我做了一些测试,发现在典型的街景小人拖动中,单击事件几乎立即触发,但全景位置更改事件大约需要 250 毫秒才能触发。因此,我在 click 事件处理程序中使用一个计时器将其延迟 1 秒,然后检查自全景更改发生以来的时间。通常是大约 750 毫秒前。如果超过 2 秒,我认为这是真正的点击,而不是街景小人移动。

var lastsvchg = 0; // at the top
// ...

    // add a click event handler to give lat/long. Have to cater for the fact that dragging the streetview pegman also triggers a click event
     google.maps.event.addListener(map, 'click', function (e) {
            setTimeout(function() {  // wait 0.5 seconds to let pano_changed trigger first in case pegman being dragged
                if (new Date() - lastsvchg > 2000) {  // ignore if due to pegman being dragged in last 2 seconds
                    document.getElementById('mappos').innerHTML = e.latLng.lat().toFixed(6) + "," + e.latLng.lng().toFixed(6);
                }
            }, 1000);  // wait 1 second before testing
     });

// detect changes to streetview position. Could use position_changed event also.
      google.maps.event.addListener(panorama, 'pano_changed', function() {
          lastsvchg = new Date(); // to check if click event triggered by pegman move
          svpos = panorama.getPosition();
          document.getElementById('svpos').innerHTML = svpos.lat().toFixed(6) + "," + svpos.lng().toFixed(6);
      });

【问题讨论】:

    标签: javascript google-maps-api-3 google-street-view


    【解决方案1】:

    您是否只是将点击事件绑定到地图容器,或者您是否为每个点击事件使用了正确的函数 `google.maps.event.trigger()'?

    您可以在http://gmaps-samples-v3.googlecode.com/svn/trunk/map_events/map_events.html查看this页面的来源

    【讨论】:

    • 我所有的点击都发生在地图上。我没有触摸街景窗格。我的点击事件是这样开始的: google.maps.event.addListener(map, 'click', function (e) {
    • 我从您上面引用的页面复制了代码,并添加了全景图,以便将街景小人放在地图上。果然,当我拖动他时,点击事件在按钮向上触发。
    • 我试图设置一个小提琴来演示对上述页面的更改,这里:jsfiddle.net/yjyh423s 但这是我的第一个小提琴,我无法让它工作。也许其他人可以,所以可以证明这个问题。我在 Javascript 部分的中间添加了 9 行代码,以 var svpos= 开头
    • working fiddle(也添加到您的问题中)
    • 感谢您修复小提琴。我已经为我的问题添加了一个可行的解决方案,但仍然更喜欢更优雅的解决方案。
    猜你喜欢
    • 1970-01-01
    • 2011-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-18
    • 2020-12-27
    相关资源
    最近更新 更多