在 jQuery Mobile 中使用 longclick/taphold 和 Google 地图？答案

【问题标题】：Using longclick/taphold with Google Maps in jQuery Mobile?在 jQuery Mobile 中使用 longclick/taphold 和 Google 地图？
【发布时间】：2011-06-07 12:01:23
【问题描述】：

我正在使用带有 jQuery Mobile 的 Google 地图。

我可以很容易地将点击事件绑定到地图，但是有没有办法绑定长点击？我想在长按后在地图上添加一个标记。

我可以使用 jQuery Mobile 的“taphold”，专为长时间点击而设计，但这并不能让我访问地图属性，例如点击的纬度：

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

相反，我可以使用 Google 地图点击监听器，但它会拾取短点击，这使得地图在移动设备上使用起来很繁琐：

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

有什么想法吗？

感谢您的帮助。

【问题讨论】：

目前我的解决方法是使用双击，这是谷歌地图事件，但长按会更好。

标签： jquery google-maps jquery-mobile

【解决方案1】：

对于任何寻求解决方案的人，我在 Google 地图论坛上得到了这个，它可以解决问题。

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...
}

【讨论】：

这项工作不适用于我的带有 phonegap 的应用程序，永远不会触发事件 mousedown 并且永远不会设置计时器，但它适用于 pc 浏览器。如何纠正？还有..click事件总是被触发，longclick事件触发时如何防止click事件发生？

【解决方案2】：

使用 Richard 提供的代码示例，我进行了一些更改，以确保在“延迟”期间发生拖动事件时不会触发长按事件。另外，现在在延迟结束时触发 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_);
};

希望它会帮助别人！

【讨论】：

【解决方案3】：

这是来自 Leiko http://jsfiddle.net/ryanoc/BaFGw/3/code{}; 的实施答案

【讨论】：

【解决方案4】：

在标记上使用与jquery-ui-map v.3.0-rc1 相同的代码。

var gmarker = map.gmap('addMarker', marker_opts);
new LongPress(gmarker, 500);
gmarker.addEventListener('taphold', function(e) {
    //do something
}

function LongPress(elem, length) {
  this.length_ = length;
  var me = this;
  me.elem_ = elem;
  me.timeoutId_ = null;
  elem.addEventListener('mousedown', function(e) {
    me.onMouseDown_(e);
  });
  elem.addEventListener('mouseup', function(e) {
    me.onMouseUp_(e);
  });
  elem.addEventListener('drag', function(e) {
    me.onMapDrag_(e);
  });
};

LongPress.prototype.onMouseUp_ = function(e) {
  clearTimeout(this.timeoutId_);
};

LongPress.prototype.onMouseDown_ = function(e) {
  clearTimeout(this.timeoutId_);
  var elem = this.elem_;
  var event = e;
  this.timeoutId_ = setTimeout(function() {
    elem.triggerEvent('taphold');
  }, this.length_);
};

LongPress.prototype.onMapDrag_ = function(e) {
  clearTimeout(this.timeoutId_);
};

【讨论】：

【解决方案5】：

上面两个代码中的并集。这会在开始拖动时禁用“HOLD”。

function LongClick(map, maxTime) {
    this.maxTime = maxTime;
    this.isDragging = false;
    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);
    });
    google.maps.event.addListener(map, 'drag', function(e) {
        me.onMapDrag_(e);
    });
}
LongClick.prototype.onMouseUp_ = function(e) {
    var now = +new Date;
    if (now - this.downTime > this.maxTime && this.isDragging === false) {
        google.maps.event.trigger(this.map, 'longpress', e);
    }
}
LongClick.prototype.onMouseDown_ = function() {
    this.downTime = +new Date;
    this.isDragging = false;
}
LongClick.prototype.onMapDrag_ = function(e) {
    this.isDragging = true;
};

【讨论】：