¿Usando longclick/taphold con Google Maps en jQuery Mobile?

Question

Estoy usando Google Maps con jQuery Mobile.

Puedo vincular un evento de clic al mapa con la suficiente facilidad, pero ¿hay alguna manera de vincular un clic largo? Me gustaría agregar un marcador al mapa después de un largo clic.

puedo utilizar 'taphold' de jQuery Mobile, diseñado especialmente para los clics largos, pero eso no me da una manera de acceder a las propiedades del mapa tales como el LatLng del grifo:

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

Por el contrario, yo pueden usar los mapas de Google, haga clic oyente, sino que recoge clics cortos, lo que hace que el mapa más incómoda de usar en un móvil:

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

no veo un detector de eventos 'longclick' de Google Maps API V3: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

¿Alguna idea?

Gracias por su ayuda.

Answer 1

Para cualquiera que esté buscando una solución, la recibí en los foros de Google Maps, y funciona.

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

Usando el ejemplo de código dieron por Richard hice algunos cambios para evitar que hechos LongPress no se activan si se han realizado eventos de arrastre durante el "retardo". Además, el evento de pulsación larga ahora se desencadena al final de la demora, no cuando se desencadena el evento de mouseup. aquí está:

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

esperan que ayude a alguien!

Answer 3

Aquí está la respuesta implementada desde Leiko http://jsfiddle.net/ryanoc/BaFGw/3/code{};

Answer 4

El mismo código se trabaja con jquery-ui-map v.3.0-rc1 utilizado en un marcador.

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

Answer 5

La unión en los dos códigos anteriores. Esto desactiva "HOLD" cuando comienza a arrastrar.

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