如何在Mobile上的Google Maps JS API v3中区分点击和拖动？

Tom O'Connor 发表于 Dev

汤姆·奥康纳

我正在使用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。

我遇到的问题是，如果我单击地图，将其拖动，然后移动到移动设备上的其他位置，它将调用placeMarker（），这很容易理解（如果令人讨厌的话），因此拖动地图的过程会创建标记（和POST到服务器）。

是否有任何方法可以检测到是否发生了拖动，因此我可以告诉它不要费心地进行placeMarker和POST？

关闭

看看这样的代码是否适合您：

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

});