在 jQuery Mobile 中使用 longclick/taphold 和 Google 地图?
Posted
技术标签:
【中文标题】在 jQuery Mobile 中使用 longclick/taphold 和 Google 地图?【英文标题】:Using longclick/taphold with Google Maps in jQuery Mobile? 【发布时间】: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
有什么想法吗?
感谢您的帮助。
【问题讨论】:
目前我的解决方法是使用双击,这是谷歌地图事件,但长按会更好。 【参考方案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;
;
【讨论】:
以上是关于在 jQuery Mobile 中使用 longclick/taphold 和 Google 地图?的主要内容,如果未能解决你的问题,请参考以下文章
在 Phonegap 项目中使用普通 JQuery(使用 JQuery Mobile)
如何使用 jquery 或 jquery mobile mobile 根据日期列出数据
如何在 jquery 3.1.0 中使用“滑动菜单 Jquery Mobile”?