2014-02-17 35 views
3

我想通過觸摸事件檢查谷歌地圖的邊界變化。 具體來說,我想製作一些系統,如果我觸摸屏幕顯示谷歌地圖, 並更改邊界,發送一些可以指定新的地圖到服務器。爲了實現這個系統,我第一次使用了bound_changed事件。像下面一樣通過觸摸事件實時檢查谷歌地圖的邊界變化

google.maps.event.addListener(map, 'bounds_changed', (function() { 
    var bar=map.getCenter() 
    socket.emit('center_spe', 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); 
}); 

(當然還有在谷歌地圖事件觸控事件,上面的代碼不工作)

+0

你嘗試過'dragstart'嗎?未經測試,但你可以放棄它。 – MrUpsidown

回答

1

Google Maps V3 API Events for google.maps.Map Demo,如果你在觸摸設備上檢查,你可以看到,一旦您開始拖移地圖,拖動dragstart事件被解僱。 拖動事件在您拖動地圖時反覆被觸發。一旦你停止拖動,並從屏幕上刪除你的手指bounds_changeddragend事件被解僱。因此,爲了您的目的,您可以輕鬆使用dragend事件。 下面是關於如何使用它的一個例子:

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

地圖是你的地圖元素。 如果您考慮同時使用bounds_changeddragend事件,由於沒有內置方法可將偵聽器應用於多個事件,但您又不想兩次定義回調函數,因此可以這樣做:

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');}); 

在我的PC 的bounds_changed反覆而我拖動地圖(如拖動事件)被解僱,但我的手機的bounds_changed被炒魷魚,一旦我停止拖動地圖,我從刪除我的手指屏幕。另一方面dragend事件在我的PC和手機上表現相同。我個人會用第一種方法(dragend事件)爲你提到的目的

+0

這是對桌面和移動設備上的bounds_changed的不同行爲的極好描述。相同的行爲適用於center_changed。您可以通過更改瀏覽器的開發人員工具中的設備類型並重新加載頁面來確認不同的行爲。同意你關於使用拖動事件的建議,以避免這種模糊性。 –

+0

收聽拖拽事件,然後抓住相機位置:getCenter()和getBounds()不會更新以反映新相機位置,直到拖動結束。 –