在jQuery Mobile中使用longclick/taphold和谷歌地图？

Question

我正在使用谷歌地图与jQuery Mobile.

我可以很容易地将click事件绑定到地图上,但有没有办法绑定长按？长按一下,我想在地图上添加一个标记.

我可以使用jQuery Mobile的'taphold',专为长时间点击而设计,但这并没有让我有办法访问地图属性,例如tap的latlng:

    $('#map-canvas').bind('taphold', function(e) {
      console.log('taphold');
      e.stopImmediatePropagation();
      return false;
    } );

相反,我可以使用谷歌地图点击监听器,但这会获得短暂的点击,这使得地图可以在移动设备上使用:

google.maps.event.addListener($('#map-canvas'), 'click', function(event){  ...

我没有看到Google Maps API V3的'longclick'事件监听器:http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

有任何想法吗？

谢谢你的帮助.

Answer 1

对于那些寻找解决方案的人来说,我在谷歌地图论坛上得到了这个解决方案.

function LongClick(map, length) {
    this.length_ = length;
    var me = this;
    me.map_ = map;
    google.maps.event.addListener(map, 'mousedown', function(e) { me.onMouseDown_(e) });
    google.maps.event.addListener(map, 'mouseup', function(e) { me.onMouseUp_(e) });   
}   
LongClick.prototype.onMouseUp_ = function(e) {
    var now = +new Date;
    if (now - this.down_ > this.length_) {
        google.maps.event.trigger(this.map_, 'longpress', e);
    }   
}   
LongClick.prototype.onMouseDown_ = function() {
    this.down_ = +new Date;   
}
new LongClick(map, 300);
google.maps.event.addListener(map, 'longpress', function(event) {
    do stuff...
}

Answer 2

使用Richard I提供的代码示例进行了一些更改,以确保在"延迟"期间进行拖动事件时不会触发longpress事件.此外,longpress事件现在在延迟结束时触发,而不是在触发mouseup事件时触发.这里是 :

function LongPress(map, length) {
  this.length_ = length;
  var me = this;
  me.map_ = map;
  me.timeoutId_ = null;
  google.maps.event.addListener(map, 'mousedown', function(e) {
    me.onMouseDown_(e);
  });
  google.maps.event.addListener(map, 'mouseup', function(e) {
    me.onMouseUp_(e);
  });
  google.maps.event.addListener(map, 'drag', function(e) {
    me.onMapDrag_(e);
  });
};
LongPress.prototype.onMouseUp_ = function(e) {
  clearTimeout(this.timeoutId_);
};
LongPress.prototype.onMouseDown_ = function(e) {
  clearTimeout(this.timeoutId_);
  var map = this.map_;
  var event = e;
  this.timeoutId_ = setTimeout(function() {
    google.maps.event.trigger(map, 'longpress', event);
  }, this.length_);
};
LongPress.prototype.onMapDrag_ = function(e) {
  clearTimeout(this.timeoutId_);
};

希望它会帮助别人!