Используете longclick / taphold с Google Maps в jQuery Mobile?

Question

Я использую Google Maps с jQuery Mobile.

Я могу достаточно легко связать событие клика с картой, но есть ли способ связать длинный щелчок? Я хотел бы добавить маркер на карту после долгого щелчка.

Я могу использовать «тапхолд» в jQuery Mobile, разработанный специально для длинных нажатий, но это не дает мне способа получить доступ к свойствам карты, таким как ширина нажатия:

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

И наоборот, я могу использовать прослушиватель кликов Карт Google, но он улавливает короткие щелчки, что делает карту удобной для использования на мобильном телефоне:

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

Я не вижу прослушивателя событий 'longclick' для API Карт Google V3: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Есть идеи?

Спасибо за вашу помощь.

Answer 1

Для тех, кто ищет решение, я получил его на форумах Google Maps, и он добился цели.

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

Используя пример кода, предоставленный Ричардом, я внес некоторые изменения, чтобы гарантировать, что события 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_);
};

Надеюсь, это кому-нибудь поможет!

Answer 3

Вот реализованный ответ от Лейко http://jsfiddle.net/ryanoc/BaFGw/3/code{};

Answer 4

Объединение в двух кодах выше.Это отключает «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;
};

Answer 5

Тот же код работает с 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_);
};