OpenLayers:如何在标记上添加单击和触摸事件

时间:2013-05-27 11:50:29

标签: javascript touch openlayers

我构建了一个移动浏览器用地图,因此我需要为每个标记点击并点按/触摸事件。我尝试添加点击事件然后添加触摸事件,但它只适用于其中一个。

marker.events.register( 'click', marker, function( evt ) {
    $( '#info' ).html(
        '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
    );
});
//marker.events.register( 'touchstart', marker, function( evt ) {
//  $( '#info' ).html(
//      '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
//  );
//});

1 个答案:

答案 0 :(得分:1)

openlayers.org网站上有一个例子 - Click Handler Example

您可以创建一个自定义控件类来扩展OpenLayers.Control,并在类中创建一个使用OpenLayers.Handler.Click来监听click事件的函数。

Handler.Click实际上会同时收听点击事件和触摸事件。

OpenLayers.Control.ListenToClick = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
        'single': true,
        'pixelTolerance': 0,
        'stopSingle': false
    },

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
        );
        OpenLayers.Control.prototype.initialize.apply(
            this, arguments
        ); 
        this.handler = new OpenLayers.Handler.Click(
            this, {
                'click': this.onClick,
            }, this.handlerOptions
        );
    }, 

    onClick: function(evt) {
        $( '#info' ).html(
            '<p>' + data[i].title + '<br />' + data[i].addr + '</p>'
        );
    },
});

创建它并在需要时添加到地图

var ctmControl = new OpenLayers.Control.ListenToClick({
    handlerOptions: {
        'single': true,
        'pixelTolerance': 0,
        'stopSingle': false
    }
});
map.addControl(ctmControl);

如果这对你不敏感,你可以试试这个

'pixelTolerance': 10,

最后但并非最不重要的,请记得激活它

ctmControl.activate();

当然,您可以以相同的方式停用它。

ctmControl.deactivate();