在jQuery Mobile中使用Google地圖的longclick/taphold？

Question

我正在使用Google Maps和jQuery Mobile。

我可以輕鬆地將點擊事件綁定到地圖，但是有沒有辦法來綁定長按？我想在長時間點擊後在地圖上添加一個標記。

我可以使用jQuery Mobile的「taphold」，特別是對於長點擊設計，但是這並沒有給我一個方法來訪問地圖屬性，如水龍頭的經緯度：

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

相反，我可以使用谷歌地圖點擊收聽，但拿起短點擊，這使得地圖繁瑣的對移動使用：

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

我沒有看到谷歌地圖API V3一個「longclick」事件監聽器： http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

任何想法？

感謝您的幫助。

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

Answer 2

使用的代碼示例給了理查德·我做了一些改動，以確保當拖動事件被「延遲」中提出，長按事件不會被觸發。 另外，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{};

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