Question

我想通过Touch事件检查谷歌地图中的界限变化。具体来说，我想制作一些系统，如果我触摸显示谷歌地图的屏幕，并更改边界，发送一些东西可以指定新的映射到服务器。要体谅这一点系统，我第一次使用了bound_changed事件。如下所示

google.maps.event.addListener(map, 'bounds_changed', (function () {
    var bar=map.getCenter()
    socket.emit('center_spe', bar);
}));

它适用于我的笔记本电脑！如果我用鼠标拖动地图，谷歌地图实时发送变量。但如果我使用触控设备，谷歌地图会在触摸结束时发送“bar”。

当然我在谷歌地图开发者的参考文献中检查了事件列表我意识到没有关于触摸事件的事件。喜欢touchmove，touchstart等（https://developers.google.com/maps/documentation/javascript/reference?hl=ko#Map）

有魔法可以让我在使用触控设备时实时检查界限变化吗？如下。

google.maps.event.addListener(map,"touchmove",function(event) { 
    var bar=event.latLng;
    socket.emit('message', bar);
});

（当然谷歌地图活动中没有触摸事件，上面的代码不起作用）

Answer 1

根据Google Maps V3 API Events for google.maps.Map Demo，如果您检查触摸设备，则可以看到，一旦开始拖动地图，拖动和 dragstart 事件就会被触发。拖动地图时，拖动事件会反复被触发。一旦停止拖动并从屏幕上移开手指， bounds_changed 和 dragend 事件就会被触发。因此，为了您的目的，您可以轻松使用 dragend 事件。以下是如何使用它的示例：

google.maps.event.addListener(map, 'dragend', function(){
    console.log('drag ended');
});

map 是您的地图元素。如果您考虑同时使用 bounds_changed 和 dragend 事件，因为没有内置方法可以为多个事件应用侦听器但是您不想定义回调函数两次，你可以这样做：

google.maps.event.addListener( map, 'bounds_changed', function(e){ console.log('bound changed');} );
google.maps.event.addListener( map, 'dragend', function(){ google.maps.event.trigger(this, 'bounds_changed');} );

在我的电脑上 bounds_changed 在我拖动地图时反复被触发（例如拖动事件），但在我的手机上 bounds_changed 被触发一次我停止拖动地图，然后从屏幕上移开手指。另一方面， dragend 事件在我的PC和Mobile上都表现相同。我个人会将第一种方法（ dragend 事件）用于您提及的目的。

通过触摸事件实时检查谷歌地图中的边界变化

1 个答案: