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

我正在使用谷歌地图与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_); }; 

希望它会帮助别人！

Answer 3

以下是Leiko http://jsfiddle.net/ryanoc/BaFGw/3/ code{};的实现答案code{};

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

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