【发布时间】: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);
});
为了其他人的利益,我想出了一个可行的解决方案。我做了一些测试,发现在典型的街景小人拖动中,单击事件几乎立即触发,但全景位置更改事件大约需要 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