如何區分移動設備上的Google Maps JS API v3中的點擊和拖動？

Question

我正在使用Bootstrap，jQuery和Google Maps v3 API構建支持移動設備的HTML5網站。

我已經找到了大部分代碼，我希望能夠點擊，添加一個標記，HTTP POST該位置到服務器（用於存儲它）。

我最初難以讓Android看到觸摸時發生點擊。

if ($.browser.mobile) {
        google.maps.event.addListener(map, 'mousedown', function(event) {
           placeMarker(event.latLng);
        });

} else { 

  google.maps.event.addListener(map, 'click', function(event) {
     placeMarker(event.latLng);
  });

}
}

我正在使用http://detectmobilebrowsers.com/ jQuery代碼來執行$.browser.mobile事情。

我遇到的問題是，如果我單擊地圖，拖動它，然后移動到移動設備上的其他位置，它會調用pl​​aceMarker（），這是可以理解的，如果有刺激性，那么拖動地圖的過程會創建標記（和POST到服務器）。

有沒有辦法可以檢測到，如果發生拖拽，我可以告訴它不要去做placeMarker和POST嗎？

Answer 1

看看這樣的代碼是否適合您：

google.maps.event.addListener(map, 'mousedown', function(event) {

  var initPoint = {x: event.pageX, y: event.pageY}, 
      toBeCanceled = false, 
      latLong = event.latLong;

    google.maps.event.addListener(map, 'mousemove', function(event) {
       var newPoint = {x: event.pageX, y: event.pageY};

       // if newPoint has moved beyond expected limits
       toBeCanceled = true
    });  

    google.maps.event.addListener(map, 'mouseup', function(event) {

      if (toBeCanceled) {
        event.preventDefault() // event.stop() seems to work as commented by OP
      } else {
        placeMarker(event.latLng);
      }

      // Unregister mousemove and mouseup
    });

});

Answer 2

我寧願使用dragstart, dragend, drag事件而不是mousedown事件。 如果這不會影響您要向用戶呈現的用戶體驗，也可以使用dblclick替換click。 我不知道“點擊”如何與“拖動”事件交互。